app.routing.module.ts里面,关键部分
const routes: Routes = [ { path: '', redirectTo : 'c3/c2/mmc', pathMatch: 'full'}, { path: 'c3', component: C3Component, children: [ { path: 'c2/:name', component: C2Component}, ] }, { path: '**', component: ErrorComponent} ];
C2Component关键部分
export class C2Component implements OnInit { // tslint:disable-next-line:variable-name private _router: ActivatedRoute constructor(router: ActivatedRoute) { this._router = router; } ngOnInit() { let name = this._router.snapshot.params["name"]; let queryId = this._router.snapshot.queryParams["id"]; console.log(name, queryId); } }
c3.component.html里面关键部分
<h1>c3 page</h1> <!--下面这个一定要写,否则会无法渲染子路由组件--> <router-outlet></router-outlet>
测试连接地址
http://localhost:4200/c3/c2/aaa?id=123234