Angular：带注入子组件的结构指令OnPush策略下输入变更不生效

首先得搞懂OnPush变更检测的核心逻辑：它是Angular的性能优化策略，和默认的Default策略不同，只有满足特定触发条件时，组件才会执行变更检测，不会在每次浏览器事件循环都遍历组件树。

OnPush的触发条件包括：

• 组件的输入属性通过Angular绑定机制发生引用变更（注：原始类型如数字、字符串的新值赋值也会被视为“引用变更”；但引用类型如对象，只有替换整个对象引用时才会触发，修改对象内部属性不会）
• 组件内部触发用户事件（点击、输入、鼠标移动等）
• 手动调用组件自身的ChangeDetectorRef.detectChanges()（强制触发当前组件的变更检测）
• 手动调用ChangeDetectorRef.markForCheck()（标记当前组件及祖先组件在下一次检测周期中需要检查，但前提是有触发源启动检测周期）
• 使用async管道订阅Observable，当流发出新值时，管道会自动调用markForCheck()

你遇到的问题本质是：直接修改了动态创建的子组件实例的输入属性，但没有通过Angular的绑定机制通知组件，也没正确触发子组件的变更检测。

当你直接修改childComponent.instance.count时，Angular的变更检测系统完全感知不到这个变化——OnPush组件只会监听通过Angular绑定输入的变化，而非直接修改实例属性的变化。你之前调用父组件的markForCheck()没用，因为父组件的变更检测不会自动触发OnPush子组件的检测，子组件只认自己的触发条件。

针对你的场景，有两种简单有效的解决方法：

方法1：使用Angular的setInput()方法（推荐，Angular 14+支持） #

Angular 14及以上版本为ComponentRef提供了setInput()方法，它会通过Angular绑定机制更新输入属性，同时自动触发OnPush组件的变更检测。

修改你的指令代码，保存动态创建的ComponentRef引用，在需要更新计数时调用setInput()：

// 在指令类中保存组件引用
private childComponentRef: ComponentRef<ChildComponent> | null = null;

// 创建组件时
this.childComponentRef = this.vcr.createComponent(ChildComponent);
// 初始化输入
this.childComponentRef.setInput('count', initialCount);
// 插入到DOM中
this.renderer.appendChild(this.elementRef.nativeElement, this.childComponentRef.location.nativeElement);

// 当需要更新计数时
if (this.childComponentRef) {
  this.childComponentRef.setInput('count', updatedCount);
}

这种方法最贴合Angular的设计理念，无需手动处理变更检测，Angular会自动完成所有逻辑。

方法2：手动修改属性后触发子组件的变更检测 #

如果你使用Angular 14以下版本，或者不想用setInput()，可以直接修改组件实例属性，然后调用子组件自身的ChangeDetectorRef.detectChanges()强制触发检测：

// 保存组件引用
private childComponentRef: ComponentRef<ChildComponent> | null = null;

// 创建组件时
this.childComponentRef = this.vcr.createComponent(ChildComponent);
this.childComponentRef.instance.count = initialCount;
this.renderer.appendChild(this.elementRef.nativeElement, this.childComponentRef.location.nativeElement);
// 初始化时需要触发一次检测
this.childComponentRef.changeDetectorRef.detectChanges();

// 更新计数时
if (this.childComponentRef) {
  this.childComponentRef.instance.count = updatedCount;
  // 强制子组件执行变更检测
  this.childComponentRef.changeDetectorRef.detectChanges();
}

这里的关键是调用子组件的detectChanges()，而非父组件的——只有触发子组件自己的变更检测，OnPush组件才会更新视图。

把这两种方法应用到你的异常版本示例中，点击增量按钮时，注入的子组件计数就会正常同步更新了。

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