Como definir os valores padrão para as propriedades do componente Angular 2?

Ao escrever componentes do Angular 2.0, como definir os valores padrão das propriedades?

Por exemplo - desejo definir foocomo 'bar'padrão, mas a ligação pode resolver imediatamente para 'baz'. Como isso funciona nos ganchos do 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);
    }
}

Dados os modelos a seguir, é o que eu espero que os valores sejam. Estou errado?

<foo-component [foo] = 'baz'></foo-component>

Registrado no console:

'baz'
'bar'
'baz'

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

Registrado no console:

'bar'
undefined
undefined

Esse é um assunto interessante. Você pode brincar com dois ganchos de ciclo de vida para descobrir como funciona: ngOnChangese ngOnInit.

Basicamente, quando você define o valor padrão para Inputisso, ele será usado apenas no caso de não haver nenhum valor vindo desse componente. E a parte interessante é que será alterado antes que o componente seja inicializado.

Digamos que temos esses componentes com dois ganchos de ciclo de vida e uma propriedade 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);
  }

}

Situação 1

Componente incluso em html sem propertyvalor definido

Como resultado, veremos no console: Init default

Isso significa que onChangenão foi acionado. Init foi acionado e o propertyvalor é defaulto esperado.

Situação 2

Componente incluído em html com propriedade definida <cmp [property]="'new value'"></cmp>

Como resultado, veremos no console:

Changed new value Object {}

Init new value

E este é interessante. Em primeiro lugar foi desencadeada onChangegancho, que setado propertypara new value, eo valor anterior era objeto vazio ! E só depois que o onInitgancho foi acionado com o novo valor de property.

Aqui está a melhor solução para isso. (ANGULAR 7,8,9)

Solução de endereçamento : Para definir um valor padrão para a variável @Input . Se nenhum valor for passado para essa variável de entrada, ela assumirá o valor padrão .

Eu forneci solução para esse tipo de questão semelhante. Você pode encontrar a solução completa aqui

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);
  }
}