Al escribir componentes Angular 2.0, ¿cómo se establecen los valores predeterminados para las propiedades?
Por ejemplo, quiero establecer foo en 'bar' de forma predeterminada, pero el enlace podría resolverse inmediatamente en 'baz' . ¿Cómo se desarrolla esto en los ganchos del ciclo de vida?
@Component({ selector: 'foo-component' }) export class FooComponent { @Input() foo: string = 'bar'; @Input() zalgo: string; ngOnChanges(changes){ console.log(this.foo); console.log(changes.foo ? changes.foo.previousValue : undefined); console.log(changes.foo ? changes.foo.currentValue : undefined); } }Dadas las siguientes plantillas, esto es lo que espero que sean los valores. ¿Me equivoco?
<foo-component [foo] = 'baz'></foo-component>Registrado en la consola:
'baz' 'bar' 'baz' <foo-component [zalgo] = 'released'></foo-component>Registrado en la consola:
'bar' undefined undefinedEse es un tema interesante. Puede jugar con dos enlaces de ciclo de vida para descubrir cómo funciona: ngOnChanges y ngOnInit .
Básicamente, cuando establece el valor predeterminado en Input , significa que se usará solo en caso de que no haya ningún valor en ese componente. Y la parte interesante se cambiará antes de que se inicialice el componente.
Digamos que tenemos tales componentes con dos ganchos de ciclo de vida y una propiedad proveniente de input .
@Component({ selector: 'cmp', }) export class Login implements OnChanges, OnInit { @Input() property: string = 'default'; ngOnChanges(changes) { console.log('Changed', changes.property.currentValue, changes.property.previousValue); } ngOnInit() { console.log('Init', this.property); } }Situación 1
Componente incluido en html sin valor de property definido
Como resultado veremos en consola: Init default
Eso significa onChange no se activó. Se activó Init y el valor de la property es default como se esperaba.
situación 2
Componente incluido en html con propiedad establecida <cmp [property]="'new value'"></cmp>
Como resultado veremos en consola:
Changed new value Object {}
Init new value
Y este es interesante. En primer lugar, se activó el gancho onChange , que estableció la property en un new value , ¡y el valor anterior era un objeto vacío ! Y solo después de que el gancho onInit se activó con un nuevo valor de property .
Aquí está la mejor solución para esto. (ANGULAR Todas las versiones)
Solución de direccionamiento : establecer un valor predeterminado para la variable @Input . Si no se pasa ningún valor a esa variable de entrada, tomará el valor predeterminado .
He proporcionado una solución para este tipo de pregunta similar. Puede encontrar la solución completa desde aquí .
export class CarComponent implements OnInit { private _defaultCar: car = { // default isCar is true isCar: true, // default wheels will be 4 wheels: 4 }; @Input() newCar: car = {}; constructor() {} ngOnInit(): void { // this will concate both the objects and the object declared later (ie.. ...this.newCar ) // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT this.newCar = { ...this._defaultCar, ...this.newCar }; // console.log(this.newCar); } }