如何在Angular初始化时触发默认选中芯片的chipSelectionChanges？

Angular Material 的 MatChip 在初始化时通过 [selected] 属性绑定设置选中状态时，不会主动触发 selectionChange 事件（该事件默认仅响应用户交互操作），因此 MatChipList 的 chipSelectionChanges 流不会收到默认选中芯片的通知。以下是几种可行的实现方式：

方法一：调用MatChip内部方法触发事件 #

通过@ViewChildren获取所有MatChip实例，在视图初始化完成后，对默认选中的芯片调用内部选中方法，触发标准的选择事件：

import { ViewChild, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatChipList, MatChip } from '@angular/material/chips';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatChipList) matChipList!: MatChipList;
  @ViewChildren(MatChip) matChips!: QueryList<MatChip>;
  chips = [/* 你的芯片数据 */];

  ngAfterViewInit() {
    this.matChipList.chipSelectionChanges.subscribe(console.log);

    // 触发默认选中芯片的选择事件
    this.matChips.forEach(chip => {
      if (chip.selected) {
        // 调用内部选中方法，会触发selectionChange事件
        chip._select();
      }
    });
  }
}

如果担心私有方法_select()的兼容性问题，也可以手动触发selectionChange事件：

chip.selectionChange.emit({ chip, selected: true });

方法二：手动推送选中状态到流中 #

直接创建ChipSelectionChange对象，手动推送到chipSelectionChanges流里，无需操作芯片实例：

import { ViewChild, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatChipList, MatChip, ChipSelectionChange } from '@angular/material/chips';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(MatChipList) matChipList!: MatChipList;
  @ViewChildren(MatChip) matChips!: QueryList<MatChip>;
  chips = [/* 你的芯片数据 */];

  ngAfterViewInit() {
    this.matChipList.chipSelectionChanges.subscribe(console.log);

    // 手动推送默认选中的芯片状态
    this.matChips.forEach(chip => {
      if (chip.selected) {
        const changeEvent = new ChipSelectionChange(chip, true);
        this.matChipList.chipSelectionChanges.next(changeEvent);
      }
    });
  }
}

方法三：合并单个芯片的选择事件 #

监听每个MatChip的selectionChange事件，合并成统一的流，并在初始化时手动触发默认选中事件：

<mat-chip-list selectable multiple >
  <mat-chip
    *ngFor="let chipElement of chips"
    [selected]="chipElement.selected"
    (selectionChange)="onChipSelectionChange($event)"
  >
    {{ chipElement.name | titlecase }}
  </mat-chip>
</mat-chip-list>

import { ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatChip, ChipSelectionChange } from '@angular/material/chips';
import { merge } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChildren(MatChip) matChips!: QueryList<MatChip>;
  chips = [/* 你的芯片数据 */];

  ngAfterViewInit() {
    // 合并所有芯片的选择事件流
    const allSelectionEvents = merge(...this.matChips.map(chip => chip.selectionChange));
    allSelectionEvents.subscribe(console.log);

    // 触发默认选中芯片的事件
    this.matChips.forEach(chip => {
      if (chip.selected) {
        chip.selectionChange.emit({ chip, selected: true });
      }
    });
  }

  onChipSelectionChange(event: ChipSelectionChange) {
    // 也可在此单独处理每个芯片的选择事件
    console.log(event);
  }
}

内容的提问来源于stack exchange，提问作者Burckhardt Sébastien