Question

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

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

以及相应的HTML模板：

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

尽可能简单。现在我可以像这样使用这个组件：

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

问题1

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

问题2

如果我想像str1和str2那样传递完整的完整组件怎么办？

Answer 1

这是一个要点演示：https://gist.run/?id=0bf83980935015217cfb83250643c13f

内容预测

适用于问题1和问题2 。

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

frame-slot.html

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

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

app.html中的用法

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

内联ViewStrategy

适用于问题1和问题2 。

[Documentation] 通过使用InlineViewStrategy，您可以将模板定义为纯字符串变量，并在<compose>元素[Composition docs]的帮助下显示它。

frame-inline.js

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

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

  viewStrategy;

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

frame-inline.html

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

app.js

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>';
}

app.html中的用法

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

InnerHTML绑定

仅适用于问题1 。

您可以将内容绑定到元素的innerHTML属性。我提到了这一点，但你应该谨慎使用它，或者根本不使用它。

[Documentation]

使用innerhtml属性绑定只是设置元素的innerHTML属性。标记不会通过Aurelia的模板系统。不会评估绑定表达式和require元素。

<div innerHTML.bind="content | sanitizeHTML"></div>

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

1 个答案: