在Angular中点击按钮时如何根据状态切换按钮文本？

• 你在组件类初始化阶段直接执行document.getElementById('changeText')获取DOM元素，此时组件模板还未渲染完成，DOM节点不存在，获取到的btn为null，后续调用textContent赋值就会触发空引用报错
• 直接操作原生DOM不符合Angular的设计逻辑，框架本身提供了更简洁的动态绑定能力可以实现需求，不需要手动修改DOM内容

直接在模板中用插值表达式绑定按钮文本，通过isDisabled的布尔值动态切换展示内容，不需要任何DOM操作，修改后的代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <div style="display:flex;align-items:center;flex-direction:column;justify-self:center">
    <h2>Welcome to {{name}} </h2>

    <input [disabled]="isDisabled" [id]="myId" type="text" value="Vishwas"> 

    <!-- 直接通过插值表达式动态绑定按钮文本 -->
    <button id="changeText" (click)="enableDisable()">{{ isDisabled ? 'Edit' : 'Save' }}</button>
  </div>
  `,
  styles: []
})

export class AppComponent {
  name = 'Something';
  public myId = "testId";
  public isDisabled = true;

  enableDisable(){
    // 只需要切换isDisabled的值即可，模板会自动更新按钮文本
    this.isDisabled = !this.isDisabled;
    console.log(this.isDisabled);
  }
}

如果确实有场景需要手动获取DOM节点，要使用Angular提供的ViewChild装饰器，保证在组件渲染完成后再获取元素：

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

@Component({
  selector: 'app-root',
  template: `
  <div style="display:flex;align-items:center;flex-direction:column;justify-self:center">
    <h2>Welcome to {{name}} </h2>
    <input [disabled]="isDisabled" [id]="myId" type="text" value="Vishwas"> 
    <button #changeTextBtn (click)="enableDisable()">Edit</button>
  </div>
  `,
  styles: []
})

export class AppComponent implements AfterViewInit {
  name = 'Something';
  public myId = "testId";
  public isDisabled = true;
  // 通过ViewChild获取按钮引用
  @ViewChild('changeTextBtn') btn!: ElementRef<HTMLButtonElement>;

  ngAfterViewInit() {
    // 组件渲染完成后才可以操作DOM
  }

  enableDisable(){
    this.isDisabled = !this.isDisabled;
    this.btn.nativeElement.textContent = this.isDisabled ? "Edit" : "Save";
    console.log(this.isDisabled);
  }
}

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