在angular外部更新元素时更新绑定

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

@Component({
  selector: 'app-root',
  template: `<div>{{ data }}</div>`
})
export class AppComponent {
  data = 'Initial Data';

  constructor(private zone: NgZone) {}

  updateDataFromOutside() {
    // 假设这是从外部更新数据的代码
    this.data = 'Updated Data';

    // 手动触发变更检测
    this.zone.run(() => {
      // 这里的代码会在Angular的变更检测上下文中执行
    });
  }
}

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

@Component({
  selector: 'app-root',
  template: `<div>{{ data }}</div>`
})
export class AppComponent {
  data = 'Initial Data';

  constructor(private cdr: ChangeDetectorRef) {}

  updateDataFromOutside() {
    // 假设这是从外部更新数据的代码
    this.data = 'Updated Data';

    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

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

@Component({
  selector: 'app-root',
  template: `<div>{{ data }}</div>`
})
export class AppComponent {
  data = 'Initial Data';

  constructor(private zone: NgZone) {}

  updateDataFromOutside() {
    // 假设这是从外部更新数据的代码
    this.data = 'Updated Data';

    // 手动触发变更检测
    this.zone.run(() => {
      console.log('Change detection triggered manually.');
    });
  }
}