• 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 候选企业:中国石油呼和浩特石化公司 2019-03-26
  • 航天员沙漠野外生存训练完美收官!为第一天团打call 2019-03-25
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-03-25
  • 构建年轻干部梯次培养链 2019-03-19
  • 孙实的专栏作者中国国家地理网 2019-03-15
  • 湖南师范大学举行研究阐释党的十九大精神国家社科基金重大专项学术研讨会 2019-03-15
  • [雷人]蠢货!土地处于不同的城市和地段,关联的资源不一样,价值也不一样。不然给咱俩同样面积的土地,咱的在北上广深,你的在边远山区,你干么? 2019-03-08
  • 频道栏目
    神奇公式秒杀全国11选5 > 网络 > 路由器 > 正文
    前端路由的配置教程
    2018-05-11 10:41:25         来源:廊坊师范学院信息技术提高班十三期马莹  
    收藏   我要投稿

    神奇公式秒杀全国11选5 www.2zfa.com 首先在路由界面配置路由,children是配置子路由的

    const routes: Routes = [

    {path:'',component:HomeComponent}

    ];

    然后在引入组件

    Routes的使用

    import { HomeComponent } from './home/home.component';

    在path中不能使用"/",因为在多个视图间导航时,自由使用相对或者绝对路径

    RouteRoutlet的使用:

    插座,所有的界面都在本界面的下面显示

    RouterLink的使用:

    app.component.html界面:

    <a [routerLink]="['/']">主页</a>

    <a[routerLink]="['/product']">商品详情</a>

    <router-outlet></router-outlet>

    解释:routerLink后面'/'的是跳转的跟路由,加上点是跳转子路由的

    点击主页面上的按钮跳转到路由界面

    app-routing.module.ts路由界面

    import { HomeComponent } from './home/home.component';

    import { ProductComponent } from './product/product.component';

    const routes: Routes = [

    {path:'',component:HomeComponent},

    {path:'product',component:ProductComponent}

    ];

    例如:我点击商品详情,然后就找到跟路由中的product,然后根据引用找到相应的界面

    还有通过按钮跳转:

    <input type="button" value="商品详情" (click)="todo()">

    然后在到app.component.ts

    constructor(private router:Router){

    }

    todo(){

    this.router.navigate(['/product']);

    }

    }

    完整界面截图:

    ActivatedRoute的使用:

    app.component.html界面:

    <a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>

    product.component.ts界面,如何获取ActivatedRoute参数:

    export class ProductComponent implements OnInit {

    private productId:number;

    //首先在构造函数中注入(码号后面的是类型)

    constructor(private routerInfo:ActivatedRoute) { }

    ngOnInit() {

    //获取参数

    this.productId=this.routerInfo.snapshot.queryParams["id"];

    }

    }

    product.component.html界面,现在最后的参数:

    <p>

    商品ID:{{productId}}

    </p>

    第二种传参方式,URL方式

    第一步:修改路由中的path属性,改成

    path:'product/:id',component:ProductComponent},

    第二步:修改routerLink中的参数:

    <a [routerLink]="['/product',1]" >商品详情</a>

    第三步修改取值:

    ngOnInit() {//从URL中获取

    this.productId=this.routerInfo.snapshot.params["id"];

    }

    这种最后获取的值是1,

    todo(){

    this.router.navigate(['/product',2]);

    }

    这方式获取的结果是2但是来回切换的时候路径中的值变换页面的值不更换,解决这种问题方法叫做参数快照,使用这种方式叫做参数快照(snapshot),

    在查询参数中传递数据:

    使用的方式参数快照(snapshot)  和  参数订阅(subscribe)解决问题

    步骤:修改第三步中的获取参数的方式

    ngOnInit() {

    //参数订阅

    this.routerInfo.params.subscribe((params:Params)=>this.productId=params["id"]);

    //this.productId=this.routerInfo.snapshot.params["id"];

    }

    路由重定向:

    制定路由跳转的界面:

    {path:'',redirectTo:'/home',pathMatch:'full'},

    {path:'home',component:HomeComponent},

    解释上面的意思:

    当路由是空字符串的时候直接跳转到home中,然后通过下面这行直接找到相应的home界面

    子路由:

    子路由创建的方法:

    {path:'product/:id',component:ProductComponent,children:[

    {path:'',component:ProductComponent},

    {path:'seller/:id',component:SellerInfoComponent}

    ]},

    注解:

    路由配置完成之后,然后在相应的界面上添加插座routeroutlet

    seller-info组件的配置:

    seller-info.component.html

    <p>

    销售员ID:{{selledid}}

    </p>

    seller-info.component.ts

    部分代码:

    export class SellerInfoComponent implements OnInit {

    private selledid:number;//定义一个数字型的变量

    constructor(private routeinfo:ActivatedRoute) { }//构造函数

    ngOnInit() {

    this.selledid=this.routeinfo.snapshot.params["id"];//获取路由中的值

    }

    }

    product.component.html页面的子组件,所以在此界面中添加

    <a[routerLink]="['./']">商品详情</a><!--子路由的写法-->

    <a[routerLink]="['./seller',99]">销售员信息</a>

    <router-outlet></router-outlet>

    辅助路由(兄弟路由)

    辅助路由插座的写法:

    <router-outlet name="aux"></router-outlet>

    路由配置写法:

    {path:'chat',component:ChatComponent,outlet:'aux'}

    在主页面显示写法:

    <a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>

    <a [routerLink]="[{outlets:{aux:null}}]" >结束聊天</a>

    解释:通过路由中的outlets找到chat的html页面,然后显示!

    图解:

    <a [routerLink]="[{outlets:{primary:'home',aux:'chat'}}]">开始聊天</a>

    点击开始聊天,chat界面和home界面都会显示

    路由守卫

    先写一个路由守卫,新建里一个ts,然后写进去:

    import { CanActivate } from "@angular/router";

    export class loginGuard implements CanActivate{

    canActivate(){

    let lgogenIn:boolean=Math.random()<0.5;//获取随机数,

    if(!lgogenIn){大于0.5显示未登录

    console.log("用户未登录");

    }

    return lgogenIn;

    }

    }

    绑定路由守卫:

    canActivate:[loginGuard],实例化是通过angular注入来实例化的

    守卫那个路由,就在那个路由的后面写上

    providers:[loginGuard]

    详细用法:

    离开路由守卫,就是守卫那个组件,在离开的时候就会提示:

    创建一个ts文件,然后

    import { CanDeactivate } from "@angular/router";

    import { ProductComponent } from "../product/product.component";//引用product组件

    export class UnsaveGuad implements CanDeactivate<ProductComponent> {

    canDeactivate(component: ProductComponent) {

    return window.confirm("你还没有保存确定离开吗?");

    }

    }

    添加在要被守卫的组件路由后面,并且添加providers

    canDeactivate:[UnsaveGuad]//添加在路由后面

    UnsaveGuad//添加在providers数组里面

    守卫可以添加多个,在数组中有多个的时候可以循环完成如有一个没有满足条件,那么就不会执行当前的操作!

    点击复制链接 与好友分享!回本站首页
    上一篇:静态路由和动态路由_路由汇总和默认路由
    下一篇:在家中同时安装两个无线路由器的设置方法
    相关文章
    图文推荐
    点击排行

    关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 神奇公式秒杀全国11选5

    版权所有: 神奇公式秒杀全国11选5--致力于做实用的IT技术学习网站

  • 美国发起贸易战,我们要让世界知道美元、美债并不可靠 2019-06-05
  • 紫光阁中共中央国家机关工作委员会 2019-05-31
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2019-05-12
  • 媒体宣传报道重庆日报 王国平:扮靓重庆两江四岸” 让城市有机更新 2019-04-26
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 候选企业:中国石油呼和浩特石化公司 2019-03-26
  • 航天员沙漠野外生存训练完美收官!为第一天团打call 2019-03-25
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-03-25
  • 构建年轻干部梯次培养链 2019-03-19
  • 孙实的专栏作者中国国家地理网 2019-03-15
  • 湖南师范大学举行研究阐释党的十九大精神国家社科基金重大专项学术研讨会 2019-03-15
  • [雷人]蠢货!土地处于不同的城市和地段,关联的资源不一样,价值也不一样。不然给咱俩同样面积的土地,咱的在北上广深,你的在边远山区,你干么? 2019-03-08