Angular 2：子组件中变更检测失效问题求助

嘿，我来帮你搞定这个Angular组件的变更检测问题！从你描述的场景和代码来看，核心问题大概率出在全局函数的执行上下文和Angular变更检测的绑定上，咱们一步步拆解：

先排查最关键的坑：this指向与依赖注入问题 #

你在ngOnInit里把函数挂载到window上，虽然用了_zone.run，但如果函数的this指向不对，或者依赖没正确注入，修改的根本不是组件的title属性，手动触发变更检测也没用！

1. 确认ChangeDetectorRef正确注入 #

如果_ref是未定义的，调用detectChanges()肯定无效。正确的注入方式应该是这样：

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

@Component({
  selector: 'app-delete',
  template: 'Title is: {{title}}'
})
export class DeleteComponent {
  title = '';

  // 必须在构造函数里注入这两个服务
  constructor(private _zone: NgZone, private _ref: ChangeDetectorRef) {}

  ngOnInit() {
    this._zone.run(() => {
      window['delete'] = () => {
        this.title = 'hi';
        this._ref.detectChanges();
      };
    });
  }
}

你用箭头函数是对的（箭头函数会捕获当前组件的this），但一定要确保_ref已经被正确注入到组件中。

更优雅的替代方案：放弃全局window挂载 #

直接把函数挂到window上其实是Angular不推荐的做法，尤其是多层组件嵌套的场景，容易出现上下文混乱和内存泄漏。推荐用Angular组件通信的方式来触发更新：

步骤1：给添加公共方法 #

// delete.component.ts
export class DeleteComponent {
  title = '';

  constructor(private _ref: ChangeDetectorRef) {}

  // 定义一个公共方法，用来更新title
  updateTitle() {
    this.title = 'hi';
    // 如果组件用的是默认变更检测策略，甚至不需要手动调用detectChanges
    this._ref.detectChanges();
  }
}

步骤2：在中获取子组件实例并调用方法 #

// delete-user.component.ts
import { ViewChild, Component } from '@angular/core';
import { DeleteComponent } from './delete.component';

@Component({
  selector: 'app-delete-user',
  template: '<app-delete></app-delete>'
})
export class DeleteUserComponent {
  // 通过ViewChild获取<app-delete>的实例
  @ViewChild(DeleteComponent) deleteComponent!: DeleteComponent;

  // 可以在需要的时候调用这个方法，比如按钮点击或者父组件传递过来的事件
  triggerUpdate() {
    this.deleteComponent.updateTitle();
  }
}

步骤3：从触发更新（如果需要） #

如果要从最外层的触发，只需要通过@Input或者EventEmitter把事件传递下来就行，完全不需要依赖全局对象，符合Angular的组件设计模式。

额外排查：变更检测策略 #

如果你的组件设置了changeDetection: ChangeDetectionStrategy.OnPush，那即使修改了title，Angular也不会自动触发变更检测。这时候有两种解决方式：

1. 调用this._ref.markForCheck()（比detectChanges更高效，只会标记组件需要检测）
2. 把title改成Observable，用async管道自动处理变更检测：

   import { BehaviorSubject } from 'rxjs';
   
   @Component({
     selector: 'app-delete',
     template: 'Title is: {{title$ | async}}'
   })
   export class DeleteComponent {
     // 用BehaviorSubject来管理title状态
     title$ = new BehaviorSubject('');
   
     constructor(private _zone: NgZone) {}
   
     ngOnInit() {
       this._zone.run(() => {
         window['delete'] = () => {
           this.title$.next('hi');
         };
       });
     }
   }
   

   这种方式不需要手动调用任何变更检测方法，async管道会自动帮你处理。

总结 #

先优先检查ChangeDetectorRef是否正确注入，以及this指向是否正确；如果可以的话，尽量放弃全局window的方式，改用Angular原生的组件通信方案，这样代码更稳定、更容易维护。

内容的提问来源于stack exchange，提问作者Tavish Aggarwal