在Aurelia中用模板本身替换自定义元素（而不是将其包含在自定义元素中）？

Question

假设我有一个自定义元素<foo-bar></foo-bar> 我不想将标记呈现到标记中，而是要替换它们，以便“foo-bar”元素不再是DOM的一部分。我相信Angular通过transclude属性来做到这一点。

有没有办法在奥里利亚做到这一点？

Answer 1

您需要在组件上使用containerless装饰器。

来自文档Custom Elements Section：

  

@containerless() - 使元素的视图在没有自定义元素容器包装的情况下呈现。这不能与@sync或@useShadowDOM一起使用。它也不能用于代理行为。

所以你的组件应该是这样的：

import {customElement, bindable, containerless} from 'aurelia-framework';

@customElement('say-hello')
@containerless()
export class SayHello {
  @bindable to;

  speak(){
    alert(`Hello ${this.to}!`);
  }
}