加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular 路由 第二篇

发布时间:2020-12-17 08:28:39 所属栏目:安全 来源:网络整理
导读:1.重定向 关键词 redirectTo,pathMath;redirectTo 表示 地址,pathMath 表示 匹配原则 (full:完全一致,prefix:前缀一致)。用法:{path:'',redirectTo:'/page1',pathMatch:'full'}; 2.子路由 关键词 children使用方法:{path:'page1',children:[{path:'page3',

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',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',canAcvitate:[Guard]}

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

(编辑:李大同)

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

    推荐文章
      热点阅读