angular的路由例子

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