Angular插值语法导致NgRx Reducer无法响应Action问题咨询

问题场景 #

开发Angular+NgRx应用时遇到异常：引入子组件后，父组件通过this.store.dispatch(new ExistingAction());触发的Action对应的Reducer完全停止执行。具体细节：

• 父组件触发Action的逻辑无控制台报错，子组件模板能正常渲染文本
• 子组件通过手动订阅服务，将返回的JSON赋值给displayString，模板使用{{displayString['SelectSample']}}插值显示内容
• 修改子组件逻辑：在TS中直接提取content['SelectSample']赋值给displayString，模板改用{{displayString}}后，Reducer立即恢复正常执行

核心原因 #

1. 频繁变更检测阻塞主线程 #

当displayString初始为undefined或null时，模板中{{displayString['SelectSample']}}的写法会在每次Angular变更检测时尝试访问不存在的属性。Angular会静默处理这种属性访问错误，但会触发持续的变更检测循环——这种循环会占用主线程资源，导致NgRx的Action分发后的Reducer执行被延迟甚至阻塞。NgRx的状态更新依赖Angular的变更检测周期同步视图，持续的循环会打乱这一节奏，从表现上看就是Reducer“停止执行”。

2. 手动订阅的状态感知冲突 #

如果子组件使用手动订阅而非async管道管理服务数据，当模板中使用displayString['SelectSample']时，Angular会持续监控displayString的引用变化。若服务返回的JSON是可变对象，每次赋值后都会触发额外的变更检测，这会覆盖NgRx存储的状态更新信号，导致组件无法感知到NgRx的状态变化，Reducer的执行结果无法触发视图更新，进而被误认为Reducer未执行。

3. 两种写法的本质差异 #

• 模板直接访问属性：{{displayString['SelectSample']}}会在每次变更检测时执行属性访问操作，若displayString是异步更新的，会持续触发变更检测，占用资源
• TS提前提取值：displayString = content['SelectSample']直接将字符串赋值给变量，模板仅监控字符串的引用，变更检测频率大幅降低，不会干扰NgRx的状态处理流程

可行的解决方案 #

• 给子组件设置ChangeDetectionStrategy.OnPush，强制组件仅在输入属性变化或自身事件触发时执行变更检测，避免不必要的循环：

  import { ChangeDetectionStrategy, Component } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class ChildComponent { /* ... */ }
  

• 优先使用async管道管理服务订阅，自动处理订阅生命周期和变更检测：

  // 子组件TS
  import { map } from 'rxjs/operators';
  displayString$ = this.yourService.getData().pipe(
    map(content => content['SelectSample'])
  );
  

  <!-- 子组件模板 -->
  {{ displayString$ | async }}
  

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