什么是路由?

很多地方都见到过路由,也都听过路由。
路由是指分组从源到目的地时,决定端到端路径的网络范围的进程。【来自百度百科
例如:(路由配置)

{ path: 'awardrulesgrade', loadChildren: './awardrules/awardrulesgrade/awardrulesgrade.module#AwardrulesgradePageModule' }, 

普通路由跳转

通过组件中使用:[routerLink]="[’/routePath’]" ,将routePath改为自要跳转的路由地址。
例如:

<ion-button [routerLink]="['/tabs/tab1']" expand="full">
       确定
</ion-button>

路由跳转传值(get传值)

  1. 就是用这个:[queryParams]="{}",“{}”这里面填写需要传递的值。可以固定的数值,也可以通过变量的形式传递。
    例如:(以变量的形式显示的传值)

    <ion-item *ngFor="let item of gadeList" [routerLink]="['/awardrulesgrade']" [queryParams]="{id:item.id, Name:item.Name}">
           <ion-label>{{item.Name}}</ion-label>
    </ion-item> 
    
  2. NavController
    引入代码:

    import { NavController } from '@ionic/angular';
    

    声明:

    constructor(public nav: NavController) { }
    

    参数传递:

    this.nav.navigateForward(['/addawardrules'], {
                    queryParams: {
                      organizationId: this.organizationId,
                      OrganizationName: this.organizationName,
                      checkState: this.checkState
                    }
                  });
    

那么如何接收数据呢?

  1. 引用下面的代码

    import { ActivatedRoute } from '@angular/router';
    
  2. 声明如下

    constructor( public activatedRoute: ActivatedRoute) { }
    
  3. 获取get传值

    ngOnInit() {
        // 获取get传值
        this.activatedRoute.queryParams.subscribe((result) => {
          this.id= result.id;
        });
      }
    
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐