Aurelia是否支持翻译？

Question

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

RESULT

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>
);

RESULT

Answer 1

进行移植的几种方法： Official docs

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

Answer 2

是的，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>

<强>一些-component.js

export class SomeComponent {}

<强>一些-component.html

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

<强> RESULT

Answer 3

更新：使用插槽内容

msdeploy