Estoy en el proceso de verificación para asegurarme de que estoy recibiendo ciertos valores enviados a un componente desde otro a través de Output() personalizado de Angular y EventEmitter(). Se envían desde la vista de mi primer componente de esta manera:
<list [results]="results" (sendLanguage)="onLanguageReceived($event)" (sendZipcode)="onZipcodeReceived($event)"> </list>Si registro en la consola estos valores dentro de una función en el enlace del ciclo de vida ngOnInit de Angular dentro del componente que recibe los valores, veo el estado actual de los valores impresos en la consola con éxito. Eso se ve así:
ngOnInit() { this.sortByFilters(this.language, this.zipcode); console.log(this.sortByFilters(this.language, this.zipcode)); }La función sortByFilters completa se ve así:
sortByFilters(language, zipcode) { this.onLanguageReceived(language); this.onZipcodeReceived(zipcode); console.log('sortByFilters: ' + 'lang ' + language, 'zip ' + zipcode); }Pero como también necesito ver el estado de estos valores cuando un usuario hace clic en el elemento, coloqué esa misma función de recepción en el enlace del ciclo de vida de ngOnChanges:
ngOnChanges() { this.sortByFilters(this.language, this.zipcode); console.log(this.sortByFilters(this.language, this.zipcode)); }Sin embargo, esto no está funcionando como se esperaba. Cuando un usuario hace clic en la interfaz de usuario relevante, la función dentro de ngOnChanges nunca se activa y, por lo tanto, el registro de la consola nunca ocurre después de la ejecución inicial de OnInit. ¿No es este exactamente el tipo de escenario para el que está diseñado ngOnChanges? ¿Me estoy perdiendo de algo?
De la documentación:
Angular llama a su método ngOnChanges() cada vez que detecta cambios en las propiedades de entrada del componente (o directiva).
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges
ngOnChanges solo ocurre en las propiedades de entrada, no en las propiedades de salida.
En este ejemplo, tengo una entrada y una salida. Los cambios de entrada se rastrean a través de ngOnChanges. El evento se rastrea por medio de su evento de clic:
export class StarComponent implements OnChanges { @Input() rating: number; starWidth: number; @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>(); ngOnChanges(): void { // Convert x out of 5 starts // to y out of 86px width this.starWidth = this.rating * 86 / 5; } onClick(): void { this.ratingClicked.emit(`The rating ${this.rating} was clicked!`); } }Tengo el ejemplo completo aquí: https://github.com/DeborahK/Angular2-GettingStarted