Comment définir les valeurs par défaut des propriétés du composant Angular 2?

Lors de l'écriture de composants Angular 2.0, comment définir les valeurs par défaut des propriétés?

Par exemple, je souhaite définir foosur 'bar'par défaut, mais la liaison peut être immédiatement résolue 'baz'. Comment cela se joue-t-il dans les hooks du cycle de vie?

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

Étant donné les modèles suivants, c'est ce à quoi je m'attends que les valeurs soient. Ai-je tort?

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

Connecté à la console:

'baz'
'bar'
'baz'

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

Connecté à la console:

'bar'
undefined
undefined

C'est un sujet intéressant. Vous pouvez jouer avec deux hooks de cycle de vie pour comprendre comment cela fonctionne: ngOnChangeset ngOnInit.

Fondamentalement, lorsque vous définissez la valeur par défaut sur, Inputcela signifie qu'elle ne sera utilisée que dans le cas où aucune valeur ne viendrait sur ce composant. Et la partie intéressante, elle sera modifiée avant que le composant ne soit initialisé.

Disons que nous avons de tels composants avec deux hooks de cycle de vie et une propriété provenant 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);
  }

}

Situation 1

Composant inclus dans html sans propertyvaleur définie

En conséquence, nous verrons dans la console: Init default

Cela signifie qu'il onChangen'a pas été déclenché. Init a été déclenché et la propertyvaleur est defaultcelle attendue.

Situation 2

Composant inclus dans html avec propriété définie <cmp [property]="'new value'"></cmp>

En conséquence, nous verrons dans la console:

Changed new value Object {}

Init new value

Et celui-ci est intéressant. Tout d'abord onChange, le crochet a été déclenché , qui s'est établi propertyà new value, et la valeur précédente était un objet vide ! Et seulement après que ce onInithook ait été déclenché avec une nouvelle valeur de property.

Voici la meilleure solution pour cela. (ANGULAIRE 7,8, 9)

Solution d'adressage : pour définir une valeur par défaut pour la variable @Input . Si aucune valeur n'est passée à cette variable d'entrée, elle prendra la valeur par défaut .

J'ai fourni une solution pour ce genre de question similaire. Vous pouvez trouver la solution complète d' ici

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