Angular 2/4模板中如何获取按钮的innerHTML或innerText？

嘿，针对你想实现的「根据按钮文本是否在列表中来添加样式」的需求，我来给你梳理下最合理的实现方式，其实完全不用绕去操作DOM元素哦：

优先推荐：数据驱动的实现（无需操作DOM） #

Angular的核心是数据绑定，视图里的内容应该由组件数据来驱动，而不是反过来从DOM里读取内容。所以针对你的场景，有两种简单的写法：

1. 文本固定的情况 #

如果按钮文本是写死的（比如你的例子里的Bananas），直接把文本值放进indexOf判断就行：

<button type="button" class="btn btn-primary" 
        [ngClass]="{'bolden-text': mylist.indexOf('Bananas') > -1}">
  Bananas
</button>

2. 文本动态的情况 #

如果按钮文本来自组件里的变量，那就更方便了，直接绑定变量即可：
组件代码：

// 组件类里定义按钮文本
buttonText = 'Bananas';

模板代码：

<button type="button" class="btn btn-primary" 
        [ngClass]="{'bolden-text': mylist.indexOf(buttonText) > -1}">
  {{ buttonText }}
</button>

这种方式完全符合Angular的设计理念，既简洁又避免了DOM操作的潜在问题。

特殊场景：必须从DOM获取文本的情况 #

如果你的按钮文本是动态生成的（比如来自第三方组件、异步渲染的内容），确实需要读取DOM元素的innerText/innerHTML，那可以用以下两种方式：

1. 通过$event结合组件方法判断 #

可以写一个组件方法来接收DOM元素，然后判断文本是否在列表中：
组件代码：

isTextInList(element: HTMLElement): boolean {
  return this.mylist.indexOf(element.innerText.trim()) > -1;
}

模板代码：

<button type="button" class="btn btn-primary" 
        [ngClass]="{'bolden-text': isTextInList($event.target)}"
        (click)="isTextInList($event.target)">
  动态生成的文本
</button>

注意：ngClass在组件初始化时就会计算，所以如果要初始化就生效，可能需要在组件初始化时主动触发一次判断，或者结合AfterViewInit生命周期。

2. 通过@ViewChild获取DOM元素 #

如果需要在组件初始化时就获取按钮文本，可以用@ViewChild来获取元素引用：
组件代码：

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

export class YourComponent implements AfterViewInit {
  @ViewChild('targetBtn') targetBtn!: ElementRef;
  isBold = false;

  ngAfterViewInit(): void {
    // 组件视图初始化后获取按钮文本
    const btnText = this.targetBtn.nativeElement.innerText.trim();
    this.isBold = this.mylist.indexOf(btnText) > -1;
  }
}

模板代码：

<button #targetBtn type="button" class="btn btn-primary" 
        [ngClass]="{'bolden-text': isBold}">
  动态生成的文本
</button>

这种方式要注意：只有在AfterViewInit生命周期钩子中才能确保DOM元素已经渲染完成，可被获取到。

总结 #

尽量避免直接操作DOM，优先用数据驱动的方式实现需求，这是Angular开发的最佳实践。只有在特殊的动态场景下，才需要通过$event或@ViewChild来获取DOM元素的内容。

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