前端路由的配置教程首先在路由界面配置路由，children是配置子路由的constroutes:Routes=[{path:'''',c
omponent:HomeComponent}];然后在引入组件：Routes的使用import{HomeComponent
}from''./home/home.component'';在path中不能使用"/"，因为在多个视图间导航时，自由使用相对或者
绝对路径RouteRoutlet的使用：插座，所有的界面都在本界面的下面显示RouterLink的使用：app.component
.html界面：主页]">商品详情解释：routerLink后面''/''的是跳转的
跟路由，加上点是跳转子路由的点击主页面上的按钮跳转到路由界面app-routing.module.ts路由界面import{H
omeComponent}from''./home/home.component'';import{ProductCompo
nent}from''./product/product.component'';constroutes:Routes=
[{path:'''',component:HomeComponent},{path:''product'',component:Prod
uctComponent}];例如：我点击商品详情，然后就找到跟路由中的product，然后根据引用找到相应的界面棋牌评测网ht
tp://www.77884.net还有通过按钮跳转：ck)="todo()">然后在到app.component.tsconstructor(privaterouter:Route
r){}todo(){this.router.navigate([''/product'']);}}完整界面截图：ActivatedR
oute的使用：app.component.html界面：yParams]="{id:1}">商品详情product.component.ts界面，如何获取ActivatedRou
te参数：exportclassProductComponentimplementsOnInit{privatepro
ductId:number;//首先在构造函数中注入（码号后面的是类型）constructor(privaterouterInf
o:ActivatedRoute){}ngOnInit(){//获取参数this.productId=this.router
Info.snapshot.queryParams["id"];}}product.component.html界面，现在最后的参
数：商品ID：{{productId}} 第二种传参方式，URL方式第一步：修改路由中的path属性，改成path:''
product/:id'',component:ProductComponent},第二步：修改routerLink中的参数：[routerLink]="[''/product'',1]">商品详情第三步修改取值：ngOnInit(){//从URL
中获取this.productId=this.routerInfo.snapshot.params["id"];}这种最后获取的值
是1，todo(){this.router.navigate([''/product'',2]);}这方式获取的结果是2但是来回切换的
时候路径中的值变换页面的值不更换，解决这种问题方法叫做参数快照，使用这种方式叫做参数快照（snapshot），在查询参数中传递数据
：使用的方式参数快照（snapshot）?和?参数订阅（subscribe）解决问题步骤：修改第三步中的获取参数的方式ngOn
Init(){//参数订阅this.routerInfo.params.subscribe((params:Params)=>t
his.productId=params["id"]);//this.productId=this.routerInfo.snap
shot.params["id"];}路由重定向：制定路由跳转的界面：{path:'''',redirectTo:''/home'',pa
thMatch:''full''},{path:''home'',component:HomeComponent},解释上面的意思：当路由
是空字符串的时候直接跳转到home中，然后通过下面这行直接找到相应的home界面神马午夜影院http://v-8.cc子路由：子
路由创建的方法：{path:''product/:id'',component:ProductComponent,children:[
{path:'''',component:ProductComponent},{path:''seller/:id'',component
:SellerInfoComponent}]},注解：路由配置完成之后，然后在相应的界面上添加插座routeroutletsell
er-info组件的配置：seller-info.component.html销售员ID：{{selledid}} s
eller-info.component.ts部分代码：exportclassSellerInfoComponentimpl
ementsOnInit{privateselledid:number;//定义一个数字型的变量constructor(pr
ivaterouteinfo:ActivatedRoute){}//构造函数ngOnInit(){this.selledi
d=this.routeinfo.snapshot.params["id"];//获取路由中的值}}product.compone
nt.html页面的子组件，所以在此界面中添加商品详情销售员信息ter-outlet>辅助路由（兄弟路由）辅助路由插座的写法：-outlet>路由配置写法：{path:''chat'',component:ChatComponent,outlet:''aux''}
在主页面显示写法：开始聊天outerLink]="[{outlets:{aux:null}}]">结束聊天解释：通过路由中的outlets找到ch
at的html页面，然后显示！图解：''chat''}}]">开始聊天点击开始聊天，chat界面和home界面都会显示路由守卫先写一个路由守卫，新建里一个ts，然
后写进去：import{CanActivate}from"@angular/router";exportclassl
oginGuardimplementsCanActivate{canActivate(){letlgogenIn:boole
an=Math.random()<0.5;//获取随机数，if(!lgogenIn){大于0.5显示未登录console.log(
"用户未登录");}returnlgogenIn;}}绑定路由守卫：canActivate:[loginGuard]，实例化是通
过angular注入来实例化的守卫那个路由，就在那个路由的后面写上providers:[loginGuard]详细用法：离开路由守
卫，就是守卫那个组件，在离开的时候就会提示：创建一个ts文件，然后import{CanDeactivate}from"@
angular/router";import{ProductComponent}from"../product/prod
uct.component";//引用product组件exportclassUnsaveGuadimplementsCa
nDeactivate{canDeactivate(component:ProductComponent){returnwindow.confirm("你还没有保存确定离开吗？");}}添加在要被守卫的组件路由后面，并且添加providerscanDeactivate:[UnsaveGuad]//添加在路由后面UnsaveGuad//添加在providers数组里面守卫可以添加多个，在数组中有多个的时候可以循环完成如有一个没有满足条件，那么就不会执行当前的操作！ |
|
