Aurelia是否支持翻译？

Question

我熟悉的概念,ngTransclude通过AngularJS并this.props.children通过ReactJs,但不支持奥里利亚transclusion,即,在插入的概念,或transcluding,任意内容到另一个组成部分？

---

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/wDHkvVJRFLFL09xvnCeHE)

JS

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

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

结果

Answer 1

有几种方法可以进行翻译:官方文档

内容槽 <slot></slot>

该<slot>元素充当组件模板中的占位符,用于任意内容.例:

一些-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.命名槽

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

博客,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