<dl id="opymh"></dl>

<div id="opymh"></div>
      <div id="opymh"><tr id="opymh"></tr></div>

        <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

        <em id="opymh"></em>

        <em id="opymh"><ol id="opymh"></ol></em>

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

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

              const routes: Routes = [

              {path:'',component:HomeComponent}

              ];

              然后在引入组件£º

              Routes的使用

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

              在path中不能使用"/"£¬因为在多个视?#25216;?#23548;航时£¬自由使用相对或者绝对路径

              RouteRoutlet的使用£º

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

              RouterLink的使用£º

              app.component.html界面£º

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

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

              <router-outlet></router-outlet>

              解释£ºrouterLink后面'/'的是跳转的跟路由£¬?#30001;系?#26159;跳转子路由的

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

              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;//定义一个数?#20013;?#30340;变量

              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>

              辅助路由£¨?#20540;?#36335;由£©

              辅助路由插座的写法£º

              <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]£¬?#36947;?#21270;是通过angular注入来?#36947;?#21270;的

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

              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("你还没有保存?#33539;?#31163;开吗£¿");

              }

              }

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

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

              UnsaveGuad//添加在providers数组里面

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

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

              关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

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

              ¼«ËÙ·ÉͧºÃ¼Ù
              <dl id="opymh"></dl>

              <div id="opymh"></div>
                  <div id="opymh"><tr id="opymh"></tr></div>

                    <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                    <em id="opymh"></em>

                    <em id="opymh"><ol id="opymh"></ol></em>

                          <dl id="opymh"></dl>

                          <div id="opymh"></div>
                              <div id="opymh"><tr id="opymh"></tr></div>

                                <em id="opymh"><ins id="opymh"><mark id="opymh"></mark></ins></em><sup id="opymh"><menu id="opymh"></menu></sup>

                                <em id="opymh"></em>

                                <em id="opymh"><ol id="opymh"></ol></em>