在Angular中，变更检测是一个核心概念，它负责检测模型中的变化并更新视图。它可以自动检测大多数变化，例如属性的更改、方法调用和数组变化。但是，当直接编辑HTML时，Angular的变更检测就不会自动更新视图。

例如，当我们在组件中定义一个属性，然后在HTML模板中使用它，Angular会自动检测并更新视图。但是，如果我们直接像下面这样修改了HTML中的内容，变更检测就失效了，页面上不会实时显示修改后的内容。

app.component.html:

{{message}}

app.component.ts:

message = 'Hello World';

然后，我们在HTML文件中手动更改了“Hello World”字符串，例如：

app.component.html:

Hello Angular

此时，Angular不会自动检测并更新视图。要解决这个问题，我们需要手动触发变更检测，使Angular能够检测到变化。

有两种方法可以手动触发变更检测：

1.使用ChangeDetectorRef： 在组件中注入ChangeDetectorRef，并在HTML内容更改后调用它的detectChanges()方法。

app.component.html:

Hello World
Update

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myDiv', { static: true }) myDiv: ElementRef;
  constructor(private cdRef: ChangeDetectorRef) {}

  update() {
    this.myDiv.nativeElement.innerHTML = 'Hello Angular';
    this.cdRef.detectChanges();
  }
}

2.使用NgZone： 在组件中注入NgZone，并在HTML内容更改后，在其run方法中包装变更检测方法。

app.component.html:

Hello World
Update

app.component.ts:

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

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