angular 路由笔记

一、静态路由
app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisListComponent} from './crisis-list/crisis-list.component';
import { HeroDetailComponent} from './hero-detail/hero-detail.component';

const routes: Routes = [
  {path: 'crisis-center', component: CrisisListComponent},
  {path: 'hero', component: HeroDetailComponent},
];

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

app.component.html

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a [routerLink]="/hero" routerLinkActive="active">Heroes</a>

二、动态路由传参

模板简单传参
app-routing.module.ts

const routes: Routes = [
  {path: 'crisis-center', component: CrisisListComponent},
  {path: 'hero/:id', component: HeroDetailComponent},
];

app.component.html

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> 
<a [routerLink]="['/hero', '1']" routerLinkActive="active">Heroes</a>

hero-detail.component.ts

const id = this.route.snapshot.paramMap.get('id');
console.log(id);

模板传递对象
app-routing.module.ts

const routes: Routes = [
   {path: 'crisis-center', component: CrisisListComponent},
   {path: 'hero', component: HeroDetailComponent},
];

app.component.html

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a [routerLink]="['/hero']" [queryParams]="{id: 1, name: 'name'}" routerLinkActive="active">Heroes</a>

hero-detail.component.ts

this.route.queryParamMap.subscribe((params: Params) => {
      console.log(params.params)
})

Router的navigate方法传参
app-routing.module.ts

const routes: Routes = [
   {path: 'crisis-center', component: CrisisListComponent},
   {path: 'hero', component: HeroDetailComponent},
];

app.component.html

<nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <button (click)="heroClick()">heroes</button> 
</nav>

app.component.ts

heroClick() {
    this.router.navigate(['/hero', {id: 1, name: 'name'}])
  }

hero-detail.component.ts

this.route.paramMap.subscribe((p: Params) => {
      console.log(p.params)
    })

三、子路由
app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product/product.component';
import { SettingComponent } from './setting/setting.component';
import { ListComponent } from './product/list/list.component';
import { DetailComponent } from './product/detail/detail.component';

const routes: Routes = [
  {
    path: 'product', 
    component: ProductComponent,
    children: [
      {path: 'list', component: ListComponent},
      {path: 'detail', component: DetailComponent}
    ]
  },
  {path: 'setting', component: SettingComponent},
];

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

app.component.html

<a routerLink="/product">商品</a> 
<a routerLink="/setting">设置</a>

<router-outlet></router-outlet>

product.component.html

<div>
  <h3>商品管理页面</h3>
  <a routerLink="./list">列表</a> &nbsp;
  <a routerLink="./detail">详情</a>
</div>

<router-outlet></router-outlet>

三、路由守卫
参考@llaaakk博文地址

angular 路由笔记

推荐阅读更多精彩内容