javascript - Aurelia 是否支持嵌入？

Question

我通过AngularJS 熟悉ngTransclude 的概念|和 this.props.children 通过 ReactJs ，但是 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

进行嵌入的几种方法: 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

将模板部件用于动态生成的插槽:https://github.com/aurelia/templating/issues/432