如何获取仅含文本的ng-content值并用于aria-label？

我来帮你搞定这个需求！在Angular里要获取ng-content投影的文本并设置为aria-label属性，其实可以通过ViewChild结合生命周期钩子轻松实现，具体步骤如下：

1. 组件类中获取投影文本 #

首先在你的按钮组件类里，引入必要的Angular依赖，通过ViewChild获取模板中标记了#text的span元素，然后在ngAfterContentInit钩子中提取文本内容——这个钩子会在投影内容初始化完成后触发，能确保我们拿到完整的文本：

import { Component, ViewChild, ElementRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'my-button',
  template: `
    <span #text class="o-button-label">
      <ng-content></ng-content>
    </span>
  `
})
export class MyButtonComponent implements AfterContentInit {
  @ViewChild('text') private textElement!: ElementRef<HTMLSpanElement>;
  public ariaLabel = '';

  ngAfterContentInit(): void {
    // 提取文本并去除前后空格，避免不必要的空白字符
    this.ariaLabel = this.textElement.nativeElement.textContent?.trim() || '';
  }
}

2. 绑定aria-label属性 #

接下来把获取到的文本绑定到需要的元素上，有两种常见方式：

方式一：绑定到组件内部的按钮元素 #

如果你的按钮组件模板里包含<button>标签，直接在标签上绑定aria-label：

<button [attr.aria-label]="ariaLabel">
  <span #text class="o-button-label">
    <ng-content></ng-content>
  </span>
</button>

方式二：绑定到组件宿主元素 #

如果你想把aria-label加到<my-button>本身（宿主元素），可以用@HostBinding简化操作：

// 在组件类中添加HostBinding相关代码
import { HostBinding } from '@angular/core';

// ...
@HostBinding('attr.aria-label') get hostAriaLabel() {
  return this.ariaLabel;
}

3. 处理动态变化的投影内容 #

如果投影的文本可能会动态更新（比如通过绑定变量改变），ngAfterContentInit只会执行一次，这时候可以改用ngAfterContentChecked钩子，并添加判断避免重复赋值：

ngAfterContentChecked(): void {
  const currentText = this.textElement.nativeElement.textContent?.trim() || '';
  if (currentText !== this.ariaLabel) {
    this.ariaLabel = currentText;
  }
}

这样不管投影内容怎么变，aria-label都会同步更新啦～

内容的提问来源于stack exchange，提问作者Mat