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 。变化检测如何工作？