Angular EventEmitter创建后首次emit触发无响应问题求助

问题根因 #

• 订阅时机晚于初始化发射：Angular的EventEmitter本质是RxJS的Subject，属于热Observable，只有在被订阅后才会接收到发射的值。你在constructor中执行this.change.emit()时，ingredients 流还没有被订阅（不管是模板的async管道还是手动订阅，都是在组件初始化的后续生命周期才执行），这次发射的内容会直接丢失。
• 初始化时recipes无有效赋值：你仅声明了recipes: Array<Recipe>属性，没有给出初始值，constructor中发射的this.recipes实际是undefined，就算被订阅也无法正常生成食材列表。
• 额外注意：EventEmitter是Angular官方设计用于@Output()父子组件通信的API，不推荐在组件内部做事件流使用，内部流优先用RxJS原生的Subject相关类。

修复方案 #

推荐用BehaviorSubject替换EventEmitter，它会缓存最近一次发射的值，新订阅者也能拿到之前的缓存值，不需要关心发射和订阅的时机先后，示例代码如下：

export class Component implements OnInit {
  // 给recipes赋初始空数组，避免undefined问题
  recipes: Array<Recipe> = [];
  ingredients: Observable<Array<Ingredient>>;
  // 用BehaviorSubject，初始值设为空数组
  private change = new BehaviorSubject<Array<Recipe>>([]);

  constructor(private ingredientService: IngredientService) {
    this.ingredients = this.change.pipe(
      map(recipes => recipes.map(r => r.id)),
      switchMap(recipes => this.ingredientService.getList({recipes}))
    );
  }

  ngOnInit() {
    // 如果有初始的recipes数据请求，在这里赋值后调用next
    // 比如从接口拉取初始食谱列表的话：
    // this.fetchRecipes().then(recipes => {
    //   this.recipes = recipes;
    //   this.change.next(this.recipes);
    // })
    // 如果是静态初始值直接这里next就行
    this.change.next(this.recipes);
  }

  onEdit() {
    /* ... */
    this.change.next(this.recipes);
  }

  onDelete() {
    /* ... */
    this.change.next(this.recipes);
  }
}

如果你的recipes是来自父组件的@Input()输入值，额外增加ngOnChanges生命周期监听输入变更即可：

export class Component implements OnInit, OnChanges {
  @Input() recipes: Array<Recipe> = [];
  // ...其余属性和上面一致

  ngOnChanges(changes: SimpleChanges) {
    if (changes['recipes'] && !changes['recipes'].firstChange) {
      this.change.next(this.recipes);
    }
  }
}

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