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

Question

在 Aurelia 中，我创建了一个作为容器进行交互的自定义元素。此容器在 child 节点周围创建了一些 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 class 中，我像这样阅读所有 children @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

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

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

dynamically naming multiple slots in aurelia view

aurelia

aurelia-templating