在 aurelia 视图中动态命名多个插槽

Question

在 Aurelia 中，我创建了一个作为容器交互的自定义​​元素。这个容器在子节点周围创建了一些 ui 元素。

这些自定义元素可以在任何视图中使用，如下所示：

<wizard-container ref="container">
  <wizard-step title="Step 1" view-model="step1"></wizard-step>
  <wizard-step title="Step 2" view-model="step2"></wizard-step>
  <wizard-step title="Step 3" view-model="step3"></wizard-step>
</wizard-container>

在wizard-container 类中，我阅读了所有类似@children('wizard-step') steps = []; 的孩子，并在模板中循环它们：

...
<div class="step" repeat.for="step of steps">
  <slot name="step-${$index}"><p>slot-${$index}</p></slot>
</div>
...

问题是插槽不会被创建。

我也无法像这样向这些插槽添加任何元素

<template slot="slot-${idx}">
  <p>hello world</p>
</template>

根据这个 blog post 从 2016 年 5 月开始，数据绑定到插槽的 name 属性和 slot 属性不起作用。

有人知道现在是否可行或有任何解决方法的想法吗？

Answer 1

很遗憾，插槽无法做到这一点。由于 Shadow DOM 规范的限制，这不太可能实现。

您可能会查看可更换部件，看看它是否可以完成您需要做的事情：https://aurelia.io/docs/fundamentals/cheat-sheet#custom-elements

向下滚动一下，您会看到一些有关可更换部件的信息。话虽如此，我不确定这是否适合你。我从未尝试过使用动态命名的模板部件。