检测 HTML 绑定属性 Angular 8 的变化 - Html

在 Angular 应用程序中，HTML 元素可以通过绑定到相关的属性来反应组件中的值变化。当值更改时，元素将自动更新。有时候，我们需要手动检测值变化并进行相应的操作。在这篇文章中，我们将介绍如何检测 HTML 绑定属性 Angular 8 的变化。

检测 HTML 属性的变化

要检测 HTML 属性的变化，我们需要使用 Angular 的 @ViewChild 装饰器和 ElementRef 类。我们将在组件中添加以下代码：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  @ViewChild('exampleAttr', {static: false}) exampleAttr: ElementRef;

  constructor() { }

  ngAfterViewInit() {
    const element = this.exampleAttr.nativeElement;
    // 监听属性变化
    element.addEventListener('exampleAttrChange', () => {
      console.log(element.getAttribute('exampleAttr'));
    });
  }

}

在组件的 HTML 模板中，我们将添加一个具有绑定属性的元素：

<div #exampleAttr [exampleAttr]="exampleVar">Example Element</div>

在组件的 ngAfterViewInit 方法中，我们获取元素的引用，然后监听元素属性的变化。在这个例子中，我们将在控制台上输出新的属性值。

总结

在这篇文章中，我们介绍了如何检测 HTML 绑定属性 Angular 8 的变化。我们使用了 Angular 的 @ViewChild 装饰器和 ElementRef 类来获取元素引用和监听属性的变化。希望这篇文章对你有所帮助！