如何仅在文本时访问ng-content值？

Question

我试图访问由span给出的值ng-content的值。

我在模板中有一个包含此html的按钮组件：

<span #text class="o-button-label">
    <ng-content></ng-content>
</span>

所以我可以

<my-button>Hello</my-button>

变成

<span #text class="o-button-label">
    Hello
</span>

现在我希望该文本能够在aria-label中使用它。 除此之外，我在my-button组件中尝试了以下内容：

@ViewChild('text') textElement: ElementRef;
ngAfterViewInit() {
    console.log('textElement', this.textElement.nativeElement.value);
}

但那总是给我undefined。按value替换nodeValue会返回null。我按预期检查this.textElement.nativeElement span，span按预期包含其值，但我无法找到获取该文本值的方法。

我所做的所有搜索都指向我使用@ViewChild，但总是得到一些组件或DOM节点（like in this good topic），而不仅仅是文本，所以甚至可以通过ng-content注入文本值？

Answer 1

您只需将value属性更改为textContent

即可

ngAfterViewInit() {
    console.log('textElement', this.textElement.nativeElement.textContent);
}