- 一、靜態路由
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>
<a routerLink="./detail">詳情</a>
</div>
<router-outlet></router-outlet>
- 三、路由守衛
參考@llaaakk博文地址
