Angular 5中Redux传值至子组件报错及单向数据流最佳实践咨询

我来帮你梳理这个场景下的最佳实践，毕竟Angular开发模式下的变更检测机制对数据流的一致性要求特别严格——你遇到的问题本质上就是在变更检测过程中修改了父组件/全局状态，打破了单向数据流规则导致的。下面给你几个实用的解决方案，按推荐优先级排序：

1. 用@Output事件通知父组件处理状态变更（最推荐） #

这是最贴合Angular组件设计理念的做法：子组件（CompA）不直接dispatch Redux action，而是通过事件发射器通知父组件，由父组件负责触发状态更新。这样完全符合单向数据流，从根源上避免了变更检测冲突。

示例代码：

// CompA组件
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'comp-a',
  template: `...`
})
export class CompAComponent {
  @Output() showNotification = new EventEmitter<string>();

  ngOnInit() {
    // 把要显示的消息通过事件传给父组件
    this.showNotification.emit('你需要显示的通知内容');
  }
}

父组件模板和类：

<!-- 父组件模板 -->
<comp-a (showNotification)="handleShowNotification($event)"></comp-a>

// 父组件类
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { ShowNotificationAction } from './your-actions';

@Component({
  selector: 'parent-component',
  template: `...`
})
export class ParentComponent {
  constructor(private store: Store) {}

  handleShowNotification(message: string) {
    // 父组件负责dispatch action更新状态
    this.store.dispatch(new ShowNotificationAction(message));
  }
}

2. 将dispatch操作延后到变更检测周期之外 #

如果不想调整组件通信逻辑，最简单的办法是把dispatch操作放到Angular当前变更检测周期结束后执行。常用的方式是用setTimeout包裹，因为setTimeout会把任务放到宏任务队列，等当前所有同步代码（包括变更检测）执行完后再运行。

示例代码：

// CompA组件
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { ShowNotificationAction } from './your-actions';

@Component({
  selector: 'comp-a',
  template: `...`
})
export class CompAComponent {
  constructor(private store: Store) {}

  ngOnInit() {
    setTimeout(() => {
      this.store.dispatch(new ShowNotificationAction('你需要显示的通知内容'));
    }, 0);
  }
}

这种方式简单粗暴，但能快速解决问题，适合临时调整或者场景比较简单的情况。

3. 手动触发变更检测（应急方案，不推荐作为首选） #

如果必须在ngOnInit里同步dispatch action，可以在操作后手动调用ChangeDetectorRef的detectChanges()方法，让Angular重新执行一次变更检测，同步状态。不过这种方式相当于绕过了Angular的自动变更检测校验，可能会引入其他潜在问题，所以尽量少用。

示例代码：

// CompA组件
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Store } from '@ngrx/store';
import { ShowNotificationAction } from './your-actions';

@Component({
  selector: 'comp-a',
  template: `...`
})
export class CompAComponent implements OnInit {
  constructor(
    private store: Store,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.store.dispatch(new ShowNotificationAction('你需要显示的通知内容'));
    // 手动触发变更检测，同步状态
    this.cdr.detectChanges();
  }
}

4. 调整组件层级或状态触发时机 #

如果业务允许，你可以把触发通知的逻辑移到父组件中，比如在父组件初始化时就处理好通知状态，再加载CompA子组件。这样状态变更发生在子组件初始化之前，不会干扰子组件的变更检测过程。

比如父组件的ngOnInit先dispatch action，再通过条件渲染加载CompA：

<!-- 父组件模板 -->
<comp-a *ngIf="notificationLoaded"></comp-a>

// 父组件类
ngOnInit() {
  this.store.dispatch(new ShowNotificationAction('通知内容'));
  this.notificationLoaded = true;
}

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