美文网首页
Angular路由及参数传递

Angular路由及参数传递

作者: 雨落川川 | 来源:发表于2020-06-12 11:50 被阅读0次

    生成一个新的项目 --routing会为我们生成路由相关的模块

    ng new router --routing
    

    路由相关的对象:

    routes 路由的配置,保存了哪个url对应展示哪个对象,以及在哪个routerOutlet中展示。

    routeOutlet 占位符指令,在html中标记路由呈现的位置。

    router 负责在运行时执行路由的对象。

    navigate()
    navigateByUrl()

    通过这两个方法来导航到一个指定的路由

    routerLink 指令,用于在html中声名路由导航,可以传递参数,参数是一个数组类型。

    ActivatedRoute 当前激活的路由对象 保存着路由信息,如地址,参数等

    路由参数传递:

    1.在查询参数中传递 queryParams

    <a [routerLink]="['/'] " [queryParams]="{id:3}">首页</a>
    
    

    效果 http://localhost:4200/?id=3

    在对应的组件中接收,这里借助的是 ActivatedRoute 对象来获取参数

    export class HomeComponent implements OnInit {
    
      constructor(private routerInfo: ActivatedRoute) {
      }
    
      private productId: number;
    
      ngOnInit() {
        this.productId = this.routerInfo.snapshot.queryParams['id'];
      }
    
    }
    
    

    2.在url中传递参数

    修改app-routing.module.ts中的path配置,使其可以携带参数,并修改productComponent的routerLink

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

    效果 http://localhost:4200/product/1

    接收参数,只需要把上面第一种方式的queryParams替换为params就可以了

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

    3.事件绑定传递数据

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

    定义我们绑定的方法

    export class AppComponent {
    
      constructor(private router:Router){
      }
      toabc(): void {
        this.router.navigate(['/product', 2]);
      }
    }
    
    
    image.gif

    在对应的组件中接收

    this.productId = this.routeInfo.snapshot.params["id"];
    
    
    image.gif

    4.小问题补充

    snapshot 参数快照 subscribe 参数订阅

    this.routeInfo.params.subscribe((params:Params)=>this.productId=params['id']);
    
    

    路由重定向

    用户房顶一个特定的地址是,将其重定向到另一个地址。比如你打开www.didi.com结果打开了www.google.com

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

    这一段的意思是,当我访问空路径时,当前路由重定向到home上,比较简单的内容。

    子路由

    路由的children属性添加

    {
        path: 'product/:id', component: ProductComponent,
        children: [
          {path: '', component: ProductDescComponent},
          {path: 'seller/:id', component: SellerComponent}]
      }
    

    然后需要在ProductCompont.html中添加配置routerLint以及router-outlet

    <a [routerLink]="['./']">商品描述</a>
    <a [routerLink]="['./seller',99]">销售员信息</a>
    <router-outlet></router-outlet>
    

    这样我们就实现了子路由,同样我们仍然可以传递参数,接收方式与之前一致,从本质上来讲,子路由就是组件之间的 router-outlet形成的父子关系

    辅助路由

    辅助路由 1.router-outlet name="xxxx" 2.outlet:"xxxx" 3.{outlets:{xxxx:"yyy"}}

    本质就是一个路由允许定义多个 router-outlet

    1.app组件中重新定义一个router-outlet

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

    2.单独开发一个组件

    2.通过路由配置控制

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

    增加两个链接,注意outlets不是outlet

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

    点击开始聊天,浏览器显示结果: http://localhost:4200/home(aux:chat)

    补充,如果我们想不管我们在哪里,都希望主路由是home,可以这样更改,添加primary:'home'

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

    路由守卫

    需求:只有当用户登录获取某些权限时候才能够进入某些路由 或者 当用户未执行保存操作而试图离开当前导航时提醒用户。

    CanActivate 处理导航到某路由的情况

    CanDeactivate 处理从当前路由离开的情况

    Resolve 处理在激活路由之前获取路由数据,这样在进入路由后数据展示会更快

    创建文件,模拟登陆逻辑和离开的逻辑

    login.guard.ts

    import {CanActivate} from '@angular/router';
    
    export class LoginGuard implements CanActivate {
    
      canActivate() {
        let loginIn: boolean = Math.random() < 0.5;
        if (!loginIn) {
          console.log('用户没登录');
        }
        return loginIn;
      }
    }
    
    

    unsave.guard.ts 这里需要将需要守卫的路由作为泛型传递过去

    import {CanDeactivate} from '@angular/router';
    import {ProductComponent} from '../product/product.component';
    
    export class UnsaveGuard implements CanDeactivate<ProductComponent> {
      canDeactivate(component: ProductComponent) {
        return window.confirm('你还没有保存操作内容哦,要离开?');
      }
    }
    
    

    接下来,去改写路由的配置 app-routing.modules.ts 我们只针对product做操作

    {
        path: 'product/:id', component: ProductComponent,
        children: [
          {path: '', component: ProductDescComponent},
          {path: 'seller/:id', component: SellerComponent}],
        canActivate: [LoginGuard],
        canDeactivate: [UnsaveGuard]
      }
    

    注意不要忘了

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
      providers: [LoginGuard, UnsaveGuard]
    })
    

    然后就可以愉快的玩耍了。。。

    相关文章

      网友评论

          本文标题:Angular路由及参数传递

          本文链接:https://www.haomeiwen.com/subject/xqegtktx.html