在項(xiàng)目創(chuàng)立的最初期，我們應(yīng)該想到任何項(xiàng)目都會(huì)有路由跳轉(zhuǎn)。所以在創(chuàng)建新項(xiàng)目的時(shí)候我們就可以把router一并安裝好，
創(chuàng)建新項(xiàng)目并安裝路由命令：

ng new my-app --routing

這樣安裝的項(xiàng)目會(huì)自動(dòng)配置好路由，無(wú)需下面的操作?。?！

—————————————————————————————————————

如果在最開(kāi)始直接是使用ng new my-app新建的項(xiàng)目，可以在后期安裝router：

npm install @angular/router -s

那么我們需要在app文件夾下新建一個(gè)app-routing.module.ts文件:
app-routing.module.ts

import { NgModule } from '@angular/core';
import {Routes,RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component"
import {code404} from "./code404/code404.component"

const routes: Routes = [
    {path:'',component:HomeComponent}//配置路由
    {path:'**',component:code404}//配置404頁(yè)面
];

@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule],
    providers:[]
})
export class AppRoutingModule {}

然后在app.module.ts中添加：

import {AppRoutingModule} from './app-routing.module'
@NgModule({
  declarations: [// 源數(shù)據(jù)，只能聲明組件、指令和管道
    AppComponent , HomeComponent
  ],
  imports: [
    BrowserModule,//開(kāi)發(fā)web必備模塊
    AppRoutingModule
  ],
  providers: [{ 
      provide: [], 
      useValue: []
    }],//只能聲明服務(wù)
  bootstrap: [AppComponent]
})
export class AppModule { }

最后在app.component.html中：

  <router-outlet></router-outlet>

在html模板中使用a鏈接進(jìn)行頁(yè)面跳轉(zhuǎn)：

<a [routerLink]="['/']">首頁(yè)</a>

模板中頁(yè)面跳轉(zhuǎn)如上，在事件中用js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor(private router: Router) { }//這樣可以拿到router對(duì)象
//事件方法
toclick(){
    this.router.navigate(["/"])
}
  ngOnInit() {
  }

}

—————————————————————————————————————

路由傳參：

第一種方法：
在查詢參數(shù)中傳遞數(shù)據(jù)

地址欄顯示這樣!

image.png

html中：

<a [routerLink]="['/test']" [queryParams]="{id:1}">首頁(yè)</a>

test組件中獲取地址欄參數(shù)：

 import { Component, OnInit } from '@angular/core';   
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  private testId:number;//聲明一個(gè)數(shù)據(jù)用來(lái)存放獲取到的路由參數(shù)
  constructor(private routeInfo: ActivatedRoute) { }//這樣可以獲取到參數(shù)
  ngOnInit() {
    this.testId = this.routeInfo.snapshot.queryParams["id"];
  }

}

.................................................................................................

第二種方法：
在路由路徑中傳遞參數(shù)

地址欄顯示這樣!

image.png

相比上一種方法，這種方法需要在路由配置中設(shè)置路由可以添加參數(shù)：

//在app-routing.module.ts中
{path:'test/:id',component:PageOneComponent},

html中：

<a [routerLink]="['/test',1]">首頁(yè)</a>

test組件中獲取地址欄參數(shù)：

 import { Component, OnInit } from '@angular/core';   
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  private testId:number;//聲明一個(gè)數(shù)據(jù)用來(lái)存放獲取到的路由參數(shù)
  constructor(private routeInfo: ActivatedRoute) { }//這樣可以獲取到參數(shù)
  ngOnInit() {
    this.testId = this.routeInfo.snapshot.params["id"];
  }

}

特別注意：當(dāng)路由是從一個(gè)路由到另外一個(gè)路由跳轉(zhuǎn)傳遞參數(shù)時(shí)，使用

this.testId = this.routeInfo.snapshot.params["id"];

在同一個(gè)路由下面只改變參數(shù)就要參數(shù)訂閱，則不使用上面的代碼，而是使用如下代碼：

this.routeInfo.params.subscribe((params:Params) => this.testId = params["id"];)

—————————————————————————————————————

重定向路由：

//在app-routing.module.ts中
const routes: Routes = [
    {path:'',redirectTo:'/home',pathMatch:'full'},//重定向路由
    {path:'home',component:HomeComponent},
];