可重用组件在多次使用时在组件中发出相同的值

Question

我创建了 Angular 可重用材质多选选项，如下所示。当我在 app.ts 中多次使用这个可重用组件时，两个 mat-reusable-select 值都会互相覆盖。如何获取 app.ts 中的两个值？我错过了什么？

ma​​t-reusable-select.html

<mat-form-field appearance="none"
                floatLabel="never">
    <mat-select [formControl]="multiSelectheckboxFormControl"
                (selectionChange)="onSelectionChange($event)"
                placeholder="{{placeholder}}"
                #selection
                multiple>
        <mat-select-trigger class="mat-select-trigger">
            {{selection.value ? selection.value.length : ''}}
            <span *ngIf="multiSelectheckboxFormControl.value?.length >= 1">
                {{placeholder}}
            </span>
        </mat-select-trigger>
        <mat-option *ngFor="let item of data"
                    color="primary"
                    [value]="item.name">{{item.name}}</mat-option>
    </mat-select>
</mat-form-field>

ma​​t-reusable-select.ts

  @Input() placeholder: string;
  @Input() data: any;
  @Output() selectionChange = new EventEmitter<MatSelectChange>();

  multiSelectheckboxFormControl = new FormControl();

  onSelectionChange(event: MatSelectChange): any {
    this.selectionChange.emit(event.value);
  }

app.html

<form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
  <mat-reusable-select [data]="products | async"
  [placeholder]="'Products'"
  (selectionChange)="onSelectionChange($event)">
  </mat-reusable-select>

  <mat-reusable-select [data]="sales | async"
  [placeholder]="'Sales'"
  (selectionChange)="onSelectionChange($event)">
  </mat-reusable-select>

  <button type="submit">submit</button>
</form>

app.ts

onSelectionChange(event: string[]) {
  // output: ['prod1', 'product]
  console.log(event);
}

Answer 1

你有两种方法。

1- 为每个 创建单独的函数

2- 修改当前函数 onSelectionChange(event)有两个参数，一个用于事件，另一个用于源src。

我更喜欢第二种解决方案，如下所示：

onSelectionChange(event: string[], src: string) {
   if (src === 'firstReusableSelect') {
      this.firstReusableSelection = event;
   } else if (src === 'secondReusableSelect') {
      this.secondReusableSelection = event;
   }
}

在模板中，修改事件绑定：

<mat-reusable-select [data]="products | async"
   [placeholder]="'Products'"
   (selectionChange)="onSelectionChange($event, 'firstReusableSelection')">
</mat-reusable-select>

<mat-reusable-select [data]="sales | async"
   [placeholder]="'Sales'"
   (selectionChange)="onSelectionChange($event, 'secondReusableSelection')">
</mat-reusable-select>

这样您就可以获得两个属性 firstReusableSelection & secondReusableSelection 包含两个可重用组件中的选择，而不会相互覆盖。

我希望这就是您正在寻找的。