@@ -162,3 +162,156 @@ export default {
162162};
163163
164164` ` `
165+
166+
167+ ExpressionChangedAfterItHasBeenCheckedError 是 Angular 的一个常见错误，它通常出现在开发模式下。当 Angular 检测到某个值在检测周期之后发生了变化时，就会抛出此错误。
168+
169+ 错误背景
170+ Angular 采用 变更检测（Change Detection） 的机制，来确保视图（HTML）中的数据和组件中的数据保持同步。每当发生变化时，Angular 会进行变更检测。如果在变更检测过程中，某个数据发生了变化，Angular 会检测到不一致，并抛出 ExpressionChangedAfterItHasBeenCheckedError 错误。
171+
172+ 这个错误通常发生在：
173+
174+ 在组件的 ngOnInit 或构造函数中修改了绑定的属性（视图绑定）。
175+ 在生命周期钩子（如 ngAfterViewInit 或 ngAfterViewChecked）中修改了绑定值。
176+ 当你使用了异步数据（例如：setTimeout、Promise、Observable 等）来更新视图。
177+
178+
179+ 错误示例
180+ typescript
181+ Copy code
182+ export class MyComponent implements OnInit {
183+ title = ' Initial title' ;
184+
185+ ngOnInit () {
186+ // 在 ngOnInit 中改变了 title
187+ setTimeout( () => {
188+ this.title = ' Updated title' ;
189+ }, 0);
190+ }
191+ }
192+ 在这个例子中，setTimeout 会在 Angular 完成第一次变更检测后修改 title，导致 Angular 检测到数据不一致，从而抛出错误。
193+
194+ 如何解决这个错误
195+ 1. 使用 ChangeDetectorRef.detectChanges ()
196+ 可以显式地触发变更检测，以告诉 Angular 更新视图。
197+
198+ typescript
199+ Copy code
200+ import { Component, ChangeDetectorRef, OnInit } from ' @angular/core' ;
201+
202+ @Component({
203+ selector: ' app-my-component'
204+ templateUrl: ' ./my-component.component.html'
205+ })
206+ export class MyComponent implements OnInit {
207+ title = ' Initial title' ;
208+
209+ constructor(private cdRef: ChangeDetectorRef) {}
210+
211+ ngOnInit () {
212+ setTimeout( () => {
213+ this.title = ' Updated title' ;
214+ this.cdRef.detectChanges (); // 手动触发变更检测
215+ }, 0);
216+ }
217+ }
218+ 在上面的代码中，detectChanges () 会强制 Angular 重新运行变更检测，从而解决了错误。
219+
220+ 2. 使用 ngAfterViewInit 或 ngAfterViewChecked
221+ 你可以将属性的更新放在 ngAfterViewInit 或 ngAfterViewChecked 生命周期钩子中。ngAfterViewInit 在视图初始化之后调用，因此不会立即触发错误。
222+
223+ typescript
224+ Copy code
225+ import { Component, AfterViewInit } from ' @angular/core' ;
226+
227+ @Component({
228+ selector: ' app-my-component'
229+ templateUrl: ' ./my-component.component.html'
230+ })
231+ export class MyComponent implements AfterViewInit {
232+ title = ' Initial title' ;
233+
234+ ngAfterViewInit () {
235+ setTimeout( () => {
236+ this.title = ' Updated title' ;
237+ }, 0);
238+ }
239+ }
240+ 使用 ngAfterViewInit 或 ngAfterViewChecked 可以避免 Angular 在当前变更检测周期中检测到不一致的情况，因为这两个钩子会在视图初始化后调用。
241+
242+ 3. 使用 ChangeDetectionStrategy.OnPush
243+ 如果你的组件使用了 ChangeDetectionStrategy.OnPush，Angular 会只在输入属性变化时重新运行变更检测。在这种情况下，你需要显式地触发变更检测，通常使用 ChangeDetectorRef。
244+
245+ typescript
246+ Copy code
247+ import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from ' @angular/core' ;
248+
249+ @Component({
250+ selector: ' app-my-component'
251+ templateUrl: ' ./my-component.component.html'
252+ changeDetection: ChangeDetectionStrategy.OnPush,
253+ })
254+ export class MyComponent implements OnInit {
255+ title = ' Initial title' ;
256+
257+ constructor(private cdRef: ChangeDetectorRef) {}
258+
259+ ngOnInit () {
260+ setTimeout( () => {
261+ this.title = ' Updated title' ;
262+ this.cdRef.markForCheck (); // 标记组件为需要检查
263+ }, 0);
264+ }
265+ }
266+ 在这个例子中，markForCheck () 会告诉 Angular 检查该组件的变更，从而避免在生命周期钩子中直接更改数据。
267+
268+ 4. 延迟更新
269+ 在某些情况下，你可以通过将数据更新操作延迟到下一个 JavaScript 事件循环中，来避免在变更检测过程中更改值。
270+
271+ typescript
272+ Copy code
273+ export class MyComponent implements OnInit {
274+ title = ' Initial title' ;
275+
276+ ngOnInit () {
277+ setTimeout( () => {
278+ this.title = ' Updated title' ;
279+ }, 0); // 延迟更新到下一个事件循环
280+ }
281+ }
282+ 这会将更新放入队列中，确保它在变更检测完成后执行，从而避免错误。
283+
284+ 5. 使用 zone.js NgZone.run () (不推荐)
285+ NgZone 可以用来在 Angular 的 Zone 之外执行异步操作，并确保变更检测周期被正确处理。然而，这种方法通常不推荐，因为它可能会绕过 Angular 的正常变更检测机制，可能导致其他问题。
286+
287+ typescript
288+ Copy code
289+ import { Component, NgZone } from ' @angular/core' ;
290+
291+ @Component({
292+ selector: ' app-my-component'
293+ templateUrl: ' ./my-component.component.html'
294+ })
295+ export class MyComponent {
296+ title = ' Initial title' ;
297+
298+ constructor(private ngZone: NgZone) {}
299+
300+ ngOnInit () {
301+ this.ngZone.run( () => {
302+ setTimeout( () => {
303+ this.title = ' Updated title' ;
304+ }, 0);
305+ });
306+ }
307+ }
308+ 这种方法通常更适用于更复杂的场景，基本情况下推荐使用其他解决方案。
309+
310+ 总结
311+ ExpressionChangedAfterItHasBeenCheckedError 是因为在 Angular 的变更检测周期内，某个属性的值发生了变化。常见的解决方案有：
312+
313+ 使用 ChangeDetectorRef.detectChanges () 来手动触发变更检测。
314+ 使用 ngAfterViewInit 或 ngAfterViewChecked 来延迟数据的更新。
315+ 延迟数据更新到下一个事件循环（例如，使用 setTimeout ()）。
316+ 如果使用 OnPush 策略，确保显式触发变更检测。
317+ 通常情况下，推荐使用 ChangeDetectorRef.detectChanges () 或 markForCheck () 来解决此问题。
0 commit comments