Angular 2 如何让 Angular 检测 Angular 之外所做的更改

typescript

Angular 2 如何让 Angular 检测 Angular 之外所做的更改？

Angular 是一个流行的前端框架，它使用 typescript 构建单页应用程序。尽管 Angular 可以自动检测 Angular 组件内部的更改，但有时我们可能需要让 Angular 也能检测到 Angular 组件之外所做的更改。本文将介绍如何使用 Angular 提供的一些机制来实现这一目标。

在 Angular 中，我们可以使用 Zone.JS 来让 Angular 监听外部更改。Zone.JS 是一个 JavaScript 库，可以拦截异步操作，并提供一个用于处理这些操作的机制。通过使用 Zone.JS，我们可以监听到 Angular 之外的更改，并触发变化检测。

要在 Angular 2 中让 Angular 检测 Angular 之外所做的更改，我们需要执行以下步骤：

步骤 1：安装 Zone.JS

首先，我们需要在项目中安装 Zone.JS。可以使用 npm 命令来安装 Zone.JS：

npm install zone.JS

步骤 2：导入 Zone.JS

在 Angular 的主模块（通常是 app.module.ts）中，我们需要导入 Zone.JS：

typescript
import 'zone.JS/dist/zone';

步骤 3：启用 Zone.JS

在主模块的装饰器（通常是 @NgModule）中，我们需要启用 Zone.JS。为此，我们可以在 providers 数组中添加一个 provide 值为 NgZone 的提供商：

typescript
import { NgModule, NgZone } from '@angular/core';
@NgModule({
  providers: [
    NgZone
  ]
})
export class AppModule { }

步骤 4：使用 NgZone

现在，我们可以在任何组件中注入 NgZone，并使用它来监听 Angular 之外的更改。NgZone 提供了一个 runOutsideAngular 方法，我们可以在其中执行非 Angular 代码：

typescript
import { Component, NgZone } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>{{ title }}</h1>
    <button (click)="changeTitle()">Change Title</button>
  </code>
})
export class AppComponent {
  title = 'Angular App';
  constructor(private ngZone: NgZone) { }
  changeTitle() {
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.title = 'New Title';
      }, 2000);
    });
  }
}

在上面的示例中，当点击按钮时，changeTitle 方法会在 Angular 之外的 Zone 中运行。在 setTimeout 中，我们更改了 title 属性的值。由于我们在 Angular 之外更改了 title 属性，但是由于 NgZone 的存在，Angular 会检测到这个更改并更新 UI。

通过使用 Zone.JS 提供的 NgZone，我们可以让 Angular 检测 Angular 之外所做的更改。只需按照上述步骤安装和配置 Zone.JS，并在需要监听更改的组件中使用 NgZone 来执行非 Angular 代码即可。这样，我们就可以确保 Angular 可以检测到 Angular 之外的更改，并及时更新 UI。