角度导航问题答案

【问题标题】：Angular navigation issue角度导航问题
【发布时间】：2021-03-26 22:39:57
【问题描述】：

当我点击 整个卡片 时，它应该导航到项目详细信息组件，然后当我点击 BID RECEIVED 按钮 时，它应该导航到投标组件，但它导航到项目详情页

<div class="card" *ngFor="let data of projectdata">
   <div class="card-body" routerLink="/projectdetail/{{data._id}}">
      <div class="bids" routerLink='/bids/5edbd6eb3290c300179cc2f9'>{{data.totalBids}} BIDS RECEIVED</div>
   </div>
</div>

【问题讨论】：

我猜你正在尝试使用查询参数，但你没有，这就是你的路由不起作用的原因。由于routerLink="/projectdetail/{{data._id}}" 是动态的，因此必须为data.id 的每个可能值定义您的路由，否则它不会路由。所以你可以做的是routerLink="/projectdetail" [queryParams]="{id: data.id}" 到你的div。结果网址：projectdetails?id=someid
你试过了吗：[routerLink]="['/projectdetail/',data._id]"?

标签： javascript angular ionic-framework

【解决方案1】：

不确定嵌套 RouterLink 是否是一个好习惯，但此解决方案可能适用于您的情况：https://stackoverflow.com/a/53147466/12660773

【讨论】：

【解决方案2】：

尝试删除bids div 上的路由器链接并将其替换为(click)=nav()，然后在您的.ts 文件中：

import {Router} from '@angular/router';

constructor(private router: Router) {}

nav() {
    this.router.navigateByUrl('/bids/5edbd6eb3290c300179cc2f9');
}

【讨论】：