angular - 创建一个指向出现在命名 <router-outlet> 中的子路由的 routerLink

Question

我有一些名为 <router-outlet>我可以通过 url 导航到它，如下所示: (outletname:path) 。

我已经能够创建一个 routerLink像这样:

<a [routerLink]="[{ outlets: { outletname : [child.attributes.href] } }]" routerLinkActive="active">{{child.attributes.text}}</a>

您可以看到我必须提供 outletname在[routerLink] 。我想要的是通过变量提供导出名称。我正在尝试迭代可能使用不同名称 <router-outlet> 的子路由集合.

那么有没有办法通过像这样的变量提供导出名称..？

<a [routerLink]="['wordpress/',{ outlets: { OUTLET_NAME_AS_VAR : [child.attributes.href] } }]" routerLinkActive="active">{{child.attributes.text}}</a>

Answer 1

RouterLink 可用于单个路径，如下所示:

<a routerLink="wordpress">Link1</a>

(这里不需要方括号)

或者对于“组合”路径(您需要的)，如下所示:

<a [routerLink]="['wordpress', var, 'item']">Link2</a>

其中 var 是在组件中定义的。 注意两件事:

1. var 不在括号 {{}} 中 -> 您将收到已经提到的错误
2. 这些项目位于列表中(您已使用该列表，但不正确)。上述代码将变为/wordpress/myValue/item
   (ts: public var = 'myValue')

{} 用于参数，因此您不需要它们，因为您只需要一个普通路径。

---

更新

您可以在组件内创建一个 json，如下所示:

public outletPaths = {
   outletName: 'value1'
};

你可以像这样包含它

<a [routerLink]="['wordpress/', {outlets: outletPaths}]"> Go to page </a>

希望这有帮助