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'])});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!