频道栏目
首页 > 网络 > 路由器 > 正文
前端路由的配置教程
2018-05-11 10:41:25         来源:廊坊师范学院信息技术提高班十三期马莹  
收藏   我要投稿

首先在路由界面配置路由,children是配置子路由的

const routes: Routes = [

{path:&龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;,component:HomeComponent}

];

然后在引入组件

Routes的使用

import { HomeComponent } from &龙8国际娱乐pt老虎机39;./home/home.component&龙8国际娱乐pt老虎机39;;

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

RouteRoutlet的使用:

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

RouterLink的使用:

app.component.html界面:

<a [routerLink]="[&龙8国际娱乐pt老虎机39;/&龙8国际娱乐pt老虎机39;]">主页</a>

<a[routerLink]="[&龙8国际娱乐pt老虎机39;/product&龙8国际娱乐pt老虎机39;]">商品详情</a>

<router-outlet></router-outlet>

解释:routerLink后面&龙8国际娱乐pt老虎机39;/&龙8国际娱乐pt老虎机39;的是跳转的跟路由,加上点是跳转子路由的

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

app-routing.module.ts路由界面

import { HomeComponent } from &龙8国际娱乐pt老虎机39;./home/home.component&龙8国际娱乐pt老虎机39;;

import { ProductComponent } from &龙8国际娱乐pt老虎机39;./product/product.component&龙8国际娱乐pt老虎机39;;

const routes: Routes = [

{path:&龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;,component:HomeComponent},

{path:&龙8国际娱乐pt老虎机39;product&龙8国际娱乐pt老虎机39;,component:ProductComponent}

];

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

还有通过按钮跳转:

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

然后在到app.component.ts

constructor(private router:Router){

}

todo(){

this.router.navigate([&龙8国际娱乐pt老虎机39;/product&龙8国际娱乐pt老虎机39;]);

}

}

完整界面截图:

ActivatedRoute的使用:

app.component.html界面:

<a [routerLink]="[&龙8国际娱乐pt老虎机39;/product&龙8国际娱乐pt老虎机39;]" [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:&龙8国际娱乐pt老虎机39;product/:id&龙8国际娱乐pt老虎机39;,component:ProductComponent},

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

<a [routerLink]="[&龙8国际娱乐pt老虎机39;/product&龙8国际娱乐pt老虎机39;,1]" >商品详情</a>

第三步修改取值:

ngOnInit() {//从URL中获取

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

}

这种最后获取的值是1,

todo(){

this.router.navigate([&龙8国际娱乐pt老虎机39;/product&龙8国际娱乐pt老虎机39;,2]);

}

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

在查询参数中传递数据:

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

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

ngOnInit() {

//参数订阅

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

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

}

路由重定向:

制定路由跳转的界面:

{path:&龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;,redirectTo:&龙8国际娱乐pt老虎机39;/home&龙8国际娱乐pt老虎机39;,pathMatch:&龙8国际娱乐pt老虎机39;full&龙8国际娱乐pt老虎机39;},

{path:&龙8国际娱乐pt老虎机39;home&龙8国际娱乐pt老虎机39;,component:HomeComponent},

解释上面的意思:

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

子路由:

子路由创建的方法:

{path:&龙8国际娱乐pt老虎机39;product/:id&龙8国际娱乐pt老虎机39;,component:ProductComponent,children:[

{path:&龙8国际娱乐pt老虎机39;&龙8国际娱乐pt老虎机39;,component:ProductComponent},

{path:&龙8国际娱乐pt老虎机39;seller/:id&龙8国际娱乐pt老虎机39;,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]="[&龙8国际娱乐pt老虎机39;./&龙8国际娱乐pt老虎机39;]">商品详情</a><!--子路由的写法-->

<a[routerLink]="[&龙8国际娱乐pt老虎机39;./seller&龙8国际娱乐pt老虎机39;,99]">销售员信息</a>

<router-outlet></router-outlet>

辅助路由(兄弟路由)

辅助路由插座的写法:

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

路由配置写法:

{path:&龙8国际娱乐pt老虎机39;chat&龙8国际娱乐pt老虎机39;,component:ChatComponent,outlet:&龙8国际娱乐pt老虎机39;aux&龙8国际娱乐pt老虎机39;}

在主页面显示写法:

<a [routerLink]="[{outlets:{aux:&龙8国际娱乐pt老虎机39;chat&龙8国际娱乐pt老虎机39;}}]">开始聊天</a>

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

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

图解:

<a [routerLink]="[{outlets:{primary:&龙8国际娱乐pt老虎机39;home&龙8国际娱乐pt老虎机39;,aux:&龙8国际娱乐pt老虎机39;chat&龙8国际娱乐pt老虎机39;}}]">开始聊天</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技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

龙8国际娱乐pt老虎机