Question

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

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

如果我在编辑处传递空，它应该导航到详细的componentsnet但是它会给出错误，我该怎么解决这个问题。

Answer 1

你需要这样做：

server.properties

如果添加第三个参数，angular认为它有3个参数，两个参数和3个参数之间的差异很重要，第三个参数为空白。生成的URL看起来像：

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

vs 2 parmas：/ root / id

在第一种情况下，角度不确定在哪里路由，因为它无法匹配＆＃34;空白＆＃34;任何路线的第三个参数

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

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

Answer 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 
  }
 });
 }

Answer 3

试试这个

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

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

3 个答案: