Question

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

示例：

element.html：

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

element.ts

export class CollapsePanel
{
    private slotContent: Element;

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

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

引用Aurelia中的slot元素

1 个答案: