Aurelia 是否支持嵌入？

Question

我通过 AngularJS and this.props.children via ReactJs 熟悉 ngTransclude 的概念，但是 Aurelia 是否支持嵌入，即插入或嵌入任意内容到另一个组件的概念？

---

包含在 AngularJS (https://plnkr.co/edit/i3STs2MjPrLhIDL5eANg)

HTML

<some-component>
  Hello world
</some-component>

JS

app.directive('someComponent', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: `<div style="border: 1px solid red">
                  <div ng-transclude>
               </div>`
  }
})

结果

---

ReactJs 中的嵌入 (https://plnkr.co/edit/wDHkvVJR3FL09xvnCeHE)

JS

const Main = (props) => (
    <SomeComonent>
      hello world
    </SomeComonent>
);

const SomeComonent = ({children}) => (
    <div style={{border: '1px solid red'}}> 
      {children}
    </div>
);

结果

Answer 1

是的，Aurelia 通过使用 <content /> 组件支持嵌入概念。根据以下内容，嵌套在 <some-component> 中的任何内容，无论是 HTML、字符串还是其他组件，都将在此组件中呈现。

app.js

export class App {}

app.html

<template>
  <require from="some-component"></require>
  <some-component>
    hello world
  </some-component>
</template>

some-component.js

export class SomeComponent {}

some-component.html

<template>
  <div style="border: 1px solid red">
    <content />
  </div>
</template>

结果

Answer 2

进行嵌入的几种方法：Official docs

1。内容槽 <slot></slot>

<slot> 元素用作组件模板中任意内容的占位符。示例：

some-component.html

<template>
  <div style="border: 1px solid red">
    <slot></slot>
  </div>
</template>

用法：

<template>
  <require from="some-component"></require>

  <some-component>
    hello world
  </some-component>
</template>

结果：

2。命名插槽

一个组件可以包含多个可更换的部件。组件的用户可以更换部分或全部部件。未替换的部分将显示其默认内容。

blog-post.html

<template>
  <h1>
    <slot name="header">
      Default Title
    </slot>
  </h1>
  <article>
    <slot name="content">
      Default content
    </slot>
  </article>
  <div class="footer">
    <slot name="footer">
      Default footer
    </slot> 
  </div>
</template>

用法：

<template>
  <require from="blog-post"></require>

  <blog-post>
    <template slot="header">
      My custom header
    </template>
    <template slot="content">
      My custom content lorem ipsum fla fla fla
    </template>
    <template slot="footer">
      Copyright Megacorp
    </template> 
  </blog-post>
</template>

3。模板部件

插槽规范有限制：http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection/5

对动态生成的插槽使用 template-parts：https://github.com/aurelia/templating/issues/432

Answer 3

更新：使用插槽代替内容

// Actual component
<your-component>
  Just some content
</your-component>

// Template of the component
<template>
  <div class="some-styling">
    <slot></slot> // <-- "Just some content" will be here!!
  </div>
</template>