Ionic 4 路由器链接和查询参数不起作用答案

【问题标题】：Ionic 4 Router Link and queryParams not workingIonic 4 路由器链接和查询参数不起作用
【发布时间】：2020-01-04 08:32:09
【问题描述】：

我一直在尝试在这里找到的不同解决方案。但是，这些都不起作用。我能够生成带有参数的链接，但仍然无法在另一个组件中获取它。这是我的代码：

app-routing.module:

  { path: 'branch', loadChildren: './branch/branch.module#BranchPageModule' }

选择Page.html：

 <ion-col>
    <a class="flex" [routerLink]= "['/branch']" [queryParams]="{ id: '17'}" routerDirection="forward">
         <!-- something here -->
    </a>
  </ion-col>

branch.page.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';


@Component({
  selector: 'app-branchprofile',
  templateUrl: './branchprofile.page.html',
  styleUrls: ['./branchprofile.page.scss'],
})

export class BranchprofilePage implements OnInit {

  brand: string;

  constructor(private route: ActivatedRoute) {  }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.id)
      .subscribe(params => {
        console.log(params); 

        this.brand = params.id;
        console.log(this.brand); 
      });
    }
}

branch.page.html：

{{ brand }}

可能缺少什么？即使在console.log 什么都没有

【问题讨论】：

你试过不带过滤功能吗？我认为您可能需要先从 subscribe 函数接收值，然后才能对其进行任何操作
查询参数是否至少正确显示在地址栏中？
@chrismclarkeyes 确实如此http://localhost:8100/branch?id=17，是的，我删除了过滤器，结果相同。
好的，很高兴知道。您是否还可以添加您的 branch.page.module.ts，因为这是延迟加载的。那里的某个地方也可能有线索。

标签： angular ionic-framework routing ionic4

【解决方案1】：

只有在收到数据后才能应用过滤器，从外观上看，您根本不需要应用，因为您可以直接访问参数

ngOnInit() {
    this.route.queryParams

      .subscribe(params => {
        console.log(params); 

        this.brand = params.id;
        console.log(this.brand); 
      });
    }

否则，您还需要确保已将路由器模块导入到您的子页面组件中。这是一个工作闪电战，上面的代码来自https://stackblitz.com/edit/ng-routing-starter-lbevwv

【讨论】：

【解决方案2】：

更新中...您也可以使用paramMap：

constructor(private actRoute: ActivatedRoute){

     this.actRoute.paramMap.subscribe(params => { 
      if (params) {
        console.log('param => ', params['params']);
      }else{
        console.log('No Params...');
      }
    });

}

【讨论】：

读取参数可以使用this.YourProperty = params.get('id');