angular 路由

重新建項目開始 ng new projectName --routing
打開 ../app/app-routing.module.ts
找到 const routes:Routes = [];
routes參數: path:url地址 ,component：組件

新建倆個頁面試試

ng generate component page1
ng generate component page2

引入模塊：

import { page1Component } from ...;
import { page2Component } from ...;

routes配置: //寫在 app-route文件裏

[   
{path:'page1',component:Page1Component},
{path:'page2',component:Page2Component}
]

angular的路由使用方法和ui-router相似，只是寫法不一樣。

1.ui-route之ui-sref ：routerLink//連接
用法 ：<a [routerLink]='['/page1']>page1</a>：

2.ui-route之ui-view : router-outlet//展現div
用法：<router-outlet></router-outlet>

3.ui-route之state: Router.navigate()//路由跳轉
用法：

constructor(private router: Router)
 this.router.navigate(['/page2'])

4.ui-route之otherwise: path:'**'//路由跳轉
用法 ：{path:'**',component:errorComponent}

angular路由傳遞參數

1.queryParams

使用方法 ：傳入 <a [routerLink]="['/page1']" [queryParams]='{id:1}'>page1</a>;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.queryParams['id'])

2.連接

使用方法 ：
routes預先設置須要傳入的參數:path:'/page1/:id/:age'
傳入 <a [routerLink]="['/page1',2,3]">page1</a>;
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.params['age']);

3.配置

使用方法 ：
routes預先設置須要傳入的參數:{path:'page1',data:[{age:5}]}
接受：constructor(private routeInfo:ActivatedRoute);
      cosole.log(this.routeInfo.snapshot.data[0]['age']);

參數快照snapshot與參數訂閱subscribe區別與使用：

若是隻是使用一次的話，其實使用snapshot就能夠。
subscribe有一點相似於監聽$watch。
用法    constructor(private routeInfo:ActivatedRoute);
      this.routeInfo.params.subscribe((data)=>{console.log(data['age'])});