Tengo un componente hijo como
export class AlertComponent implements OnInit { @Input() messageData: string | string[]; constructor() { } ngOnInit(): void { } }Tengo un componente principal donde en la plantilla uso el componente anterior
<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>en el componente padre 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);}Sin embargo, los datos del mensaje no se actualizan cuando cambio la selección del tipo de alerta, ¿cómo paso los datos del mensaje para que se actualicen después de cambiar mat-select?
Lo que veo en el código es que está pasando una cadena o una matriz de cadenas. Cuando pasa una cadena, puede detectar cambios usando ngOnChanges siempre que pueda enviar datos correctamente desde el componente principal.
Cuando pasa la matriz, debe cambiar la referencia, ya que la matriz es un objeto y se pasará por referencia y la detección de cambios angulares no detectará ningún cambio, incluso si está utilizando ngOnChanges .
Cuando usa ngOnchanges , puede usar set property en @Input y establecer la propiedad y ejecutar changeDetection.
export class ChildComponent implements OnChanges { @Input() set messageData: any = []; ngOnChanges(changes) { // code here // make changes here } }Te sugiero que leas esto . ¿Cómo funciona la detección de cambios?
Intenta usar Observable
messageSubject = new BehaviorSubject(''); alertMessage$ = this.messageSubject.asObservable(); // In your switch statement this.messageSubject.next(`There are ${this.alertsCount} ${alertType} alerts`);// Pasar el observable en el componente secundario como entrada
<app-alert [messageData]="alertMessage$ | async"></app-alert>Espero que esto resuelva tu problema.