Angular.io[routerLink]传递可选动态参数

我正在尝试动态构建导航链接，其中还包含可选的参数

<mat-list-item *ngFor="let link of itemSummarylinks" class="app-sidenav-content">
            <a mat-list-item [routerLink]="[link.routerLink,itemCode,'edit']">
                {{link.name}}
            </a>
</mat-list-item>

如果路径为：

[general-product-attributes/35/Edit] --> it should edit componenet
[general-product-attributes/35]--> it should flow to detail componement

因此，如何动态构建路由器：

[routerLink]="[link.routerLink,itemCode,'edit']"
[routerLink]="[link.routerLink,itemCode,'']"

---

如果我在编辑位置传递空，它应该导航到详细组件网，但它会给出错误，我如何修复此问题。

您需要这样做：

[routerLink]="[link.routerLink,itemCode]"

如果添加第三个参数，angular认为它有3个参数，那么2个参数和3个参数之间的差异很重要，第三个参数为空。生成的URL如下所示：

3个参数，一个空白：/root/id/

vs 2参数：/root/id

在第一种情况下，angular不确定将您路由到哪里，因为它无法将“blank”第三个参数与任何路由匹配

我不确定你如何区分某个东西是否应该是可编辑的，但假设你在链接上使用了一个名为“可编辑”的属性，你可以在一个简单的表达式中使用它：

[routerLink]="(link.editable) ? [link.routerLink,itemCode,'edit'] : [link.routerLink,itemCode]"

---

您需要这样做：

[routerLink]="[link.routerLink,itemCode]"

如果添加第三个参数，angular认为它有3个参数，那么2个参数和3个参数之间的差异很重要，第三个参数为空。生成的URL如下所示：

3个参数，一个空白：/root/id/

vs 2参数：/root/id

在第一种情况下，angular不确定将您路由到哪里，因为它无法将“blank”第三个参数与任何路由匹配

我不确定你如何区分某个东西是否应该是可编辑的，但假设你在链接上使用了一个名为“可编辑”的属性，你可以在一个简单的表达式中使用它：

[routerLink]="(link.editable) ? [link.routerLink,itemCode,'edit'] : [link.routerLink,itemCode]"

像这样试试

 [routerLink]="[link.routerLink,itemCode]"

像这样试试

 [routerLink]="[link.routerLink,itemCode]"

---

您可以使用如下矩阵url表示法： 您只定义一条路线

{ path: 'general-product-attributes/:id', component: eneralProductAttributesDetailComponent }

在进行编辑时，您可以以这种方式导航：

this.router.navigate(['general-product-attributes',itemCode, {edit: true}]);

您的Url将显示以下内容：

/general-product-attributes/itemCode;edit=true

如果要显示详细信息，您不必发送“编辑”：

在您的组件中，您必须检查编辑是否存在，以执行控制：

constructor(private route: ActivatedRoute,
          private router: Router) {
 this.route.params.subscribe(params => {
  if (params['edit']) { 
    // do control for edit 
  }
 });
 }

---

您可以使用如下矩阵url表示法： 您只定义一条路线

{ path: 'general-product-attributes/:id', component: eneralProductAttributesDetailComponent }

在进行编辑时，您可以以这种方式导航：

this.router.navigate(['general-product-attributes',itemCode, {edit: true}]);

您的Url将显示以下内容：

/general-product-attributes/itemCode;edit=true

如果要显示详细信息，您不必发送“编辑”：

在您的组件中，您必须检查编辑是否存在，以执行控制：

constructor(private route: ActivatedRoute,
          private router: Router) {
 this.route.params.subscribe(params => {
  if (params['edit']) { 
    // do control for edit 
  }
 });
 }

---

但是，对于编辑，因为RouterLink是动态循环的，我应该如何传递编辑、细节？routerLink本身应该是一个带有[link，itemCode，optionalParameter]的数组？？您的示例显示了“编辑”硬编码，您可以使用一个简单的表达式绑定来完成它，但我无法从您给出的示例中告诉您如何实现，但我在回答中给出了一个示例，说明了它的外观。但是，对于编辑，因为routerLink是动态循环的，我应该如何传递编辑、详细信息？routerLink本身应该是一个带有[link，itemCode，optionalParameter]的数组？？您的示例显示了“编辑”硬编码，您可以使用一个简单的表达式绑定来完成它，但我无法告诉您如何从您给出的示例中，但在我的回答中，我给出了一个示例，说明了它看起来如何。您有两种方法来管理可选参数：1）使用如下对象：[routerLink]=“['/general produt attributes'，{edit:true}]”。有了这个，你只需要一条路线。或者使用多个路由并使用数据管理每个路由的状态：{path:'/edit'，data:{idEdit:true}，…}，{path:'''，data:{isEdit:false}，…}。管理可选参数有两种方法：1）使用如下对象：[routerLink]=“['/general produt attributes'，{edit:true}]”。有了这个，你只需要一条路线。或者使用多个路由并使用以下数据管理每个路由的状态：{path:'../edit'，data:{idEdit:true}，…}，{path:''..'，data:{isEdit:false}，…}感谢您的回答。谢谢你的回答。你让我开心（y）