Question

自定义元素允许您在使用自定义标记时通过<content ref="content"></content>选择器访问自定义标记的内部html，以及将内容拉入此视图的一些规范。

我希望能够在我的课程中访问这些数据而不包装标签。

我尝试了以下操作：this.content和console.log(this.content)根据Rob Eisenberg所偏好的databinding ref attribute策略引用它，但undefined在每个阶段都产生<content>元素生命周期。

我想到的一种解决方法是将ref标记放在另一个元素中，使用jquery提取文本，缓存它，并通过<template> <customelement>Hello World</customelement> <template>属性删除该元素，但这似乎不够优雅。 / p>

如何在与自定义元素关联的es6类中访问此数据？

示例场景：

一些-view.html

<template>
    Something, but not a content tag
</template>

customelement.html

export class CustomElement {
    get foobar () {
        //Somehow ascertain "Hello World" without displaying it in customelement
    }
}

customelement.js

{{1}}

在此示例中，可以假定自定义元素全局包含。

Answer 1

我们不再使用content元素。从RC开始，我们使用slot元素。话虽如此，slot元素不支持ref绑定，因为插槽元素有点“消失”并被正在投影的内容替换。这是因为在Shadow DOM规范中，slot实际上不是元素，它们是“处理指令”。

Answer 2

这是一个示例，显示了您可以在各个组件生命周期阶段的内容访问的内容。

https://gist.run?id=e372bdb91990d08ad49cdf39753cc622 **

<强> app.html

<template>
  <require from="./my-element"></require>

  <my-element>
    <div repeat.for="i of 5">${i}</div>
  </my-element>
</template>

我-element.html

<template> Hello! <slot></slot> </template>

我-element.js

import {inject, processContent, noView} from 'aurelia-framework'; @inject(Element) export class MyElement { constructor(element) { this.element = element; alert('constructed:\n\n' + this.element.innerHTML); } created() { alert('created:\n\n' + this.element.innerHTML); } bind() { alert('bind:\n\n' + this.element.innerHTML); } attached() { alert('attached:\n\n' + this.element.innerHTML); } }

在类中访问自定义元素的内容选择器

2 个答案: