Pregunta ¿Cómo establecer valores predeterminados para las propiedades del componente angular 2?


Al escribir componentes Angular 2.0, ¿cómo se configuran los valores predeterminados para las propiedades?

Por ejemplo, quiero establecer foo para 'bar' por defecto, pero el enlace podría resolverse inmediatamente a 'baz'. ¿Cómo se desarrolla esto en los anzuelos 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>

Logged to console: 
'baz'
'bar'
'baz'

<foo-component [zalgo] = 'released'></foo-component>

Logged to console: 
'bar'
undefined
undefined

32
2018-03-17 21:23


origen


Respuestas:


Ese es un tema interesante Puede jugar con dos ganchos de ciclo de vida para descubrir cómo funciona: ngOnChanges y ngOnInit.

Básicamente cuando configura el valor predeterminado para Input eso significa que se usará solo en caso de que no haya ningún valor para 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 que proviene 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 definición property valor

Como resultado veremos en la consola: Init default

Qué cruel onChange no fue activado Init se activó y property el valor es default como se esperaba.

Situación 2

Componente incluido en html con propiedad establecida  <cmp [property]="'new value'"></cmp>

Como resultado veremos en la consola:

Changed  new value  Object {}

Init  new value

Y este es interesante. Primero fue activado onChange gancho, que estableció property a new value, y el valor anterior era objeto vacío! Y solo después de eso onInit gancho fue activado con un nuevo valor de property.


39
2017-08-30 05:57