1

我正在尝试动态构建导航链接，该链接也具有可选参数

<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>

下面是路线：

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

如果路径是：

[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,'']"

如果我在编辑位置传递空，它应该导航到详细组件但它给出错误，我该如何解决这个问题。

4

3 回答 3

4

你需要这样做：

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

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

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

vs 2 帕尔马斯：/root/id

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

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

[routerLink]="(link.editable) ? [link.routerLink,itemCode,'edit'] : [link.routerLink,itemCode]"
于 2018-04-09T18:12:34.450 回答
2

你可以像这样使用矩阵 url 表示法：你只定义一个路由

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

并且您可以在编辑的情况下以这种方式导航：

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

您的网址将显示：

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

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

this.router.navigate(['general-product-attributes', itemCode]);

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

constructor(private route: ActivatedRoute,
          private router: Router) {
 this.route.params.subscribe(params => {
  if (params['edit']) { 
    // do control for edit 
  }
 });
 }
于 2018-04-09T18:46:43.020 回答
0

像这样试试

 [routerLink]="[link.routerLink,itemCode]"
于 2018-04-09T18:12:44.140 回答