javascript - 将动态数据传递给子组件

Question

我有一个子组件

export class AlertComponent implements OnInit {
  @Input() messageData: string | string[];

  constructor() { }

  ngOnInit(): void {

  }
}

我有一个父组件，在模板中我使用了上面的组件

<app-alert *ngIf="!!alertsCount" [type]="'danger'"
       [messageData]="alertMessageData"></app-alert>


<mat-select class="select--width--130" (selectionChange)="changeAlertType($event)" [(value)]="alertType" placeholder="Alert Types">
  <mat-option *ngFor="let alertType of alertTypes" [value]="alertType.name">
    {{ alertType.name }}
  </mat-option>
</mat-select>

在父组件 ts

getAlertMessageData(alertType: string) {
  switch (alertType) {
    case 'firing':
    case 'silenced':
    case 'resolved':
      this.alertMessageData = `There are ${this.alertsCount} ${alertType} alerts`;
      break;
    case 'all':
      this.alertMessageData = `There are ${this.alertsCount} alerts`;
      break;
  }
  console.log(this.alertMessageData);
}

changeAlertType(event: MatSelectChange) {
  this.alertType = event.value;
  this.getAlertMessageData(event.value);}

但是，当我更改警报类型的选择时，消息数据不会更新，如何传递 messageData 以便在更改 mat-select 后更新它？

Answer 1

我从代码中看到的是您正在传递字符串或字符串数​​组。当您传递字符串时，您可以使用 ngOnChanges 检测更改前提是您能够从父组件正确发送数据。
当您传递数组时，您需要更改引用，因为数组是一个对象并且将通过引用传递，即使您使用 ngOnChanges Angular 变化检测也不会检测到它的任何变化。 .
当您使用 ngOnchanges您可以在 @Input 上使用 set 属性并设置属性并运行changeDetection。

export class ChildComponent implements OnChanges {
  @Input() set messageData: any = [];

  ngOnChanges(changes) {
    // code here
    // make changes here
  }
}

我建议你阅读 this .变化检测如何工作？