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