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/wDHkvVJR3FL09xvnCeHE ）

JS

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

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

結果

Answer 1

有幾種方法可以進行翻譯： 官方文檔

1. content slot <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>

結果

Answer 3

更新：使用SLOT INSTEAD OF CONTENT

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