aurelia - 引用 Aurelia 中的槽元素

Question

在 aurelia 中，当在自定义元素中使用插槽时，是否可以以某种方式在插槽上使用 ref 元素(也许是 Aurelia 团队的新功能？github 问题据说是在 SO 而不是在 github 上发布)。

例子:

元素.html:

<template> 
    My super awesome element
    <slot ref="slotContent"></slot>
</template>

元素.ts

export class CollapsePanel
{
    private slotContent: Element;

    attached(): void
    {
        this.slotContent.classList.add("my-fancy-class");
    }
}

其他 View .html

<element>
    <div>This is some element content!</div>
</element>

渲染了otherview.html

<element>
    My super awesome element
    <div class="my-fancy-class">This is some element content!</div>
</element>

目前有什么办法可以做到这一点吗？

Answer 1

您会强制组件的用户使用可以具有类属性的 html 元素。做这样的事情会更好吗:

自定义元素模板

<template>
  <div ref="slotContent"><slot></slot></div>
</template>

代码:

export class CustomElement
{
    private slotContent: HTMLDivElement;

    attached(): void
    {
        this.slotContent.classList.add("my-fancy-class");
    }
}

使用自定义元素(使用 textnode 而不是 html 元素)

<customElement>foo</customElement>