Aurelia 将多个HTML片段/其他组件传递给组件

考虑Aurelia中的一个简单组件：

export class FrameComponent
{
    @bindable str1;
    @bindable str2;
}

以及相应的HTML模板：

<template>
    ${str1}
    ${str2}
</template>

${str1}
${str2}

就这么简单。现在我可以在这样的父级中使用此组件：

<template>
    <require from="./frame-component"></require>
    <frame-component str1="Hello" str2="World"></frame-component>
</template>

问题1

如果我不想只为子组件提供简单的字符串，而是想用HTML片段来设置它们，该怎么办

问题2

如果我想传递整个完整组件，如

str1

和

str2

？

下面是一个演示要点：

内容投影

它适用于问题1和问题2

通过使用插槽，您可以声明性地定义自定义组件的内容。它还可以包含其他自定义组件

frame slot.html

内联视图策略

它适用于问题1和问题2

通过使用InlineViewStrategy，您可以将模板定义为纯字符串变量，并在

元素的帮助下显示它

frame inline.js

app.js

内部HTML绑定

它仅适用于问题1

可以将内容绑定到元素的innerHTML属性。我是说，但你应该谨慎使用，否则就根本不用了

使用innerhtml属性进行绑定只是设置元素的innerhtml属性。标记不会通过Aurelia的模板系统。将不计算绑定表达式和require元素

---

真棒的答案！

<template>
  <div>
    <slot name="str1">Default str1</slot>
  </div>

  <div>
    <slot name="str2">Default str2</slot>
  </div>
</template>

<require from="./frame-slot"></require>

<frame-slot>
    <div slot="str1"><h3>${slotStr1}</h3></div>
    <div slot="str2">
        <h3>${slotStr2}</h3>
        <div>
            <frame-slot></frame-slot>
        </div>
    </div>
</frame-slot>

import { bindable, InlineViewStrategy } from 'aurelia-framework';

export class FrameInline {
  @bindable template;
  @bindable model;

  viewStrategy;

  attached() {
    this.viewStrategy = new InlineViewStrategy(`<template>${this.template}</template>`);
  }
}

<template>
  <compose view.bind="viewStrategy" model.bind="model"></compose>
</template>

export class App {

  inlineModel = { 
    name: "inline-template",
    description: "This is an inline template",
    slot: "Frame-slot Str1 content within frame-inline"
  };

  inlineTemplate = '<require from="./frame-slot"></require>' + 
                   '<div>${model.name}: ${model.description}</div>' + 
                   '<br>' +
                   '<frame-slot>' + 
                     '<div slot="str1">${model.slot}</div>' +
                   '</frame-slot>';
}

<require from="./frame-inline"></require>
<frame-inline template.bind="inlineTemplate" model.bind="inlineModel"></frame-inline>