angular 路由 第二篇

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular 路由 第二篇脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.重定向

关键词 redirectTo,pathMath;
redirectTo 表示 地址,
pathMath 表示 匹配原则 (full:完全一致,PRefix:前缀一致)。
用法:{path:'',redirectTo:'/page1',pathMatch:'full'};

2.子路由

关键词 children
使用方法:
{path:'page1',children:[{path:'page3',component:Page3Component}]}

3辅助路由

关键词 outlet
用法 
     <a [routerLink]="['',{outlets:{test1:'page1',test2:'page2'}}]">
     <router-outlet name='test1'></router-outlet>
     <router-outlet name='test2'></router-outlet>
     {path:'page1',component:Page1Component,outlet:'test1'},
     {path:'page2',component:Page1Component,outlet:'test2'};
从代码字面上来看,就是一下传进多个路由的信息,辅助理由的组件只能在自己outlet的属性的插座里显示,辅助路由也只能显示设置outlet属性为自身的组件。

4.路由守卫

关键词 canActivate;
用法:
1.新建一个守卫
import{ CanActivate } From '@Angular/router';
export Guard class implements CanActivate {
    canActivate(){
    return boolean;
    }
}
2.依赖注入到配置路由的ts中
import { Guard } from ....;
@ngModules{
.....,
providers:[Guard]
};
3.调用
{path:'page1',component:Page1Component,canAcvitate:[Guard]}

守卫可以配置多个,所以是一个数组。

脚本宝典总结

以上是脚本宝典为你收集整理的angular 路由 第二篇全部内容,希望文章能够帮你解决angular 路由 第二篇所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。