angular router

src/app/app.module.ts 路由配置

• 注意：path 不能以斜杠（/）開頭
• 重定向路由需要一個 pathMatch 屬性 把 pathMatch 設(shè)置為 full

• ** 路徑是一個通配符 ,404頁面
• 如果你想要看到在導(dǎo)航的生命周期中發(fā)生過哪些事件，可以使用路由器默認(rèn)配置中的 enableTracing 選項。它會把每個導(dǎo)航生命周期中的事件輸出到瀏覽器的控制臺。 這應(yīng)該只用于調(diào)試。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
// import ... 引入組件內(nèi)容
const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot( appRoutes,  { enableTracing:  true  }
   // other imports here
  ],
})
export class AppModule {
}

路由出口

類似vue中<router-view></router-view>

<router-outlet></router-outlet>

路由器鏈接

• 精確匹配[routerLinkActiveOptions] ="{exact:true}"
• routerLinkActive 激活狀態(tài)會添加active類

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active"  [routerLinkActiveOptions] ="{exact:true}">Heroes</a>

配置動態(tài)鏈接

<a [routerLink]="['/hero', hero.id]" routerLinkActive="active">Heroes</a>

• 加載路由庫
• 往殼組件的模板中添加一個導(dǎo)航條，導(dǎo)航條中有一些 A 標(biāo)簽、routerLink 指令和 routerLinkActive 指令
• 往殼組件的模板中添加一個 router-outlet 指令，視圖將會被顯示在那里
• 用 RouterModule.forRoot() 配置路由器模塊
• 設(shè)置路由器，使其合成 HTML5 模式的瀏覽器 URL
• 使用通配符路由來處理無效路由
• 當(dāng)應(yīng)用在空路徑下啟動時，導(dǎo)航到默認(rèn)路由

路由模塊

ng generate module heroes --routing

• 快速生成heroes-routing.module.ts和heroes.module.ts
• 將heroes.module引入到app.module中的imports里邊

src/app/heroes
----hero-detail
-------hero-detail.component.css
-------hero-detail.component.html
-------hero-detail.component.ts
----hero-list
----- ...
----heroes-routing.module.ts
----heroes.module.ts

路由傳參

html中跳轉(zhuǎn)

//'product/123'
<button [routerLink]="['/product',123]" >詳情</button> 
<button [routerLink]="['/product/123']" >詳情</button>
 
//'product/123?test=test'
<button [routerLink]="['/product',123]" [queryParams]="{'test':'test'}">詳情</button> 

// 用“;”分隔的。 這是`矩陣 URL標(biāo)記法`
<a [routerLink]="['/test',{id:12}]"> localhost:4200/wechat;id=12 </a>

編程式導(dǎo)航

constructor(
   private router:Router  //注入路由服務(wù)
) { }

this.router.navigate(['/product','id123'],{queryParams:{'test':'1235464'}})
 //wechat
this.router.navigate(['wechat']); 

//原路由沒有配置接收參數(shù)的情況可以如下傳參數(shù)
//  http://localhost:4200/wechat;id=11
this.router.navigate(['wechat',{id:11}])

接收路由參數(shù)

接收參數(shù)

• 組件只渲染一次的時候可以直接用快照方法Snapshot（快照）
this.route.snapshot.paramMap.get('id')
• 如果有可能連續(xù)多次導(dǎo)航到此組件;應(yīng)該用ActivatedRoute服務(wù)的paramMap屬性,paramMap是一個 Observable對象,每次路由變化,都會emit一個(params: ParamMap)對象,然后用params.get('id')來獲取最新的id

import {ActivatedRoute, ParamMap, Router} from '@angular/router';
  constructor(
    //服務(wù)注入
    public route: ActivatedRoute,
  ) {
  }
  ngOnInit() {
    //快照方法
    // this.id = this.route.snapshot.paramMap.get('id');

    //params參數(shù)變化會跟新最新的id   獲取到paramMap結(jié)構(gòu)
     this.route.paramMap.subscribe(params=>{
        console.log(params.get('id'))
      })
     //獲取純對象
      this.route.params.subscribe(params=>{
        console.log(params.id)
      })
      /*
      *  獲取查詢參數(shù)
      */
       //獲取純對象
      this.route.queryParams.subscribe(params=>{
        console.log(params.test)
      })
      this.route.queryParamMap.subscribe(params=>{
        console.log(params.get('test'))
      })
  }
}