Mi aplicación angular se quedó con un problema, usé la entrada como matriz y presioné un valor en la matriz cuando surgió el evento de clic. Pero ngOnChanges no se activa cuando se realiza el empuje de la matriz. ¿Hay alguna manera de disparar ngOnChange?
Mi código es el archivo ts es
@Component({ selector: 'adv-search', templateUrl: './app/modules/result.html' }) export class InputComponent { @Input() metas:any=[]; ngOnChanges() { console.log(this.metas); } }Mi etiqueta de selector
<adv-search [metas] = "metaIds"></adv-search>Haga clic en Código de evento
insertIds(id:any) { metaIds.push(id); }La detección de cambios angulares solo verifica la identidad del objeto, no el contenido del objeto. Por lo tanto, no se detectan inserciones o extracciones.
Lo que puede hacer es copiar la matriz después de cada actualización
insertIds(id:any) { this.metaIds.push(id); this.metaIds = this.metaIds.slice(); } o use IterableDiffer para verificar cambios dentro de InputComponent en ngDoCheck como lo hace NgFor .
Si reasigna su matriz metaIds, se activará el evento de ciclo de vida ngOnChanges. Puede deconstruir su matriz en una nueva matriz.
insertIds(id:any){ this.metaIds = [...this.metaIds, id]; }La respuesta de @ GünterZöchbauer es completamente correcta. Sin embargo, me gustaría agregar una alternativa/suplemento para copiar toda la matriz. Usando el mismo ejemplo de la pregunta.
<adv-search [metas] = "metaIds"></adv-search>alterado a
<adv-search [metas] = "{trackBy: metaIds.length, metaIds: metaIds}"></adv-search>Donde length aquí es el equivalente de la función *ngFor trackBy para el componente. Con esto, ngOnChanges ocurre con cambios en la longitud del contenido.
Si se usa en combinación con el método *ngFor trackBy, debería haber algunos beneficios de rendimiento ya que las plantillas enlazadas de toda la matriz no se vuelven a calcular (sin parpadeo de pantalla/contenido).