Angular 带onSelectionChange事件的角度可重用垫选择组件

我想制作一个通用的可重用mat select组件，这样我就可以在Angular应用程序中跨多个组件使用它。到目前为止，我已经让它工作了，但我现在面临的唯一挑战是如何使“onSelectionChange（$event）”在不同的实现上运行

---

可重用的-select-component.html

<mat-form-field>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select
    [control]="control"
    [options]="dropDownOptions"
    (selectionChange)="onChange($event)"
  ></reusable-select>

<mat-form-field>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select (selectionChange)="onSelectionChange($event)></reusable-select>

page-component.html

<mat-form-field>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select
    [control]="control"
    [options]="dropDownOptions"
    (selectionChange)="onChange($event)"
  ></reusable-select>

<mat-form-field>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select (selectionChange)="onSelectionChange($event)></reusable-select>

我的问题是如何在我实现的页面中调用onSelectionChange（）？ onSelectionChange在不同的实现中是不同的，所以我不能在组件本身上定义它，但是函数应该在实现这个可重用组件的页面上实现

---

还有一些页面不需要onSelectionChange，只是像正常的下拉菜单一样，不需要函数调用。

reusables-select-component.html

<mat-form-field>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select
    [control]="control"
    [options]="dropDownOptions"
    (selectionChange)="onChange($event)"
  ></reusable-select>

<mat-form-field>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select (selectionChange)="onSelectionChange($event)></reusable-select>

page-component.html

<mat-form-field>
  <mat-select>
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select
    [control]="control"
    [options]="dropDownOptions"
    (selectionChange)="onChange($event)"
  ></reusable-select>

<mat-form-field>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let option of options" [value]="option.value">
      {{ option.text }}
    </mat-option>
  </mat-select>
</mat-form-field>

<reusable-select (selectionChange)="onSelectionChange($event)></reusable-select>

---

Thx人，开始工作了！