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

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