Question

我正在构建一个系统，该系统具有使用辅助（命名）路由器出口路由到的动态内容。

示例：

HTML

<div id="col1'>
   <router-outlet name="col1"></router-outlet>
</div>
<div id="col2'>
   <router-outlet name="col2"></router-outlet>
</div>

TypeScript

for (let c of this.containers) {
   switch (c.containerKey) {
     case "col1":
        this._router.navigate([{ outlets: { col1: [c.id] } }]);
       break;
     case "col2":
         this._router.navigate([{ outlets: { col2: [c.id] } }]);
         break;
   }
}

是否可以卸下开关盒并将c.containerKey用作命名插座？

示例

for (let c of this.containers) {
   this._router.navigate([{ outlets: { c.containerKey: [c.id] } }]);
}

我知道上面的示例不有效。但是有没有办法实现类似的目标？

Answer 1

您应该能够通过在c.containerKey周围添加[]来使用计算出的属性名称来做到这一点：

this._router.navigate([{ outlets: { [c.containerKey]: [c.id] } }]);

路由到辅助插座时，可以使用字符串作为命名插座吗？

1 个答案: