angular6之路由

對於前端單頁應用，路由一般由前端管理。在angular6中路由通過@angular/router模塊實現。

1、在app的根目錄下新建app-routing.module.ts，需要引入RouteModule, Routes模塊，

import { RouterModule, Routes } from ‘@angular/router’

2、配置路由信息:

動態路由：

{

　　path: '/view/:id',

　　component: viewComponent

}

可以在頁面獲取的路由參數id的具體值。

3、配置ngModule
@NgModule ({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

4、最后將模塊導出
export class AppRoutingModule {}
在app.module.ts根模塊中將AppRoutingModule在imports中引入
在模板中<router-outlet></router-outlet>會顯示匹配到的組件

</html>

路由跳轉：
方法一：
routerLink屬性綁定
如：<a [routerLink]=“[‘/list/all’]”>
<a [routerLink]=“[‘/list’, {foo:’foo’}]”> /list;foo=foo
<a [routerLink]=“[‘/list]” [queryParams]="{debug: true}"> /list?foo=foo
方法二：
import {Router} from '@angular/router';
private router: Router
this.router.navigateByUrl('/list')