Aurelia 自定义元素和内容

Question

我正在通读 this tutorial，我想做一些类似的事情，但我不想使用我的自定义元素的属性，而是想访问我的自定义元素标签内的内容。我似乎无法弄清楚这一点。所以 html 看起来像这样：

<modal>  
  <modal-header title="Edit Person"></modal-header>
  <modal-body content="person-information"></modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

我希望它看起来更像这样：

<modal>  
  <modal-header>Edit Person</modal-header>
  <modal-body>
      <form>...</form>
  </modal-body>
  <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

这可能吗？

Answer 1

是的，可以使用内容选择器来完成 -

modal-header.html

<template>
  <slot></slot>
</template>

您也可以通过使用任何标准 CSS 选择器指定要匹配的内容来更加具体 -

<template>
  <slot="form"></slot>
  <slot select=".form-element"></slot>
</template>

Aurelia documentation

Aurelia 自定义元素和内容

Aurelia Custom Elements & Content

aurelia