typescript - Hur ställer man in standardvärden för Angular 2-komponentens egenskaper?

När man skriver Angular 2.0-komponenter, hur sätter man standardvärden för egenskaper?

Till exempel - jag vill sätta foo till 'bar' som standard, men bindningen kan omedelbart lösas till 'baz'. Hur spelar detta ut sig i livscykelhakarna?

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

Givet följande mallar, är detta vad jag förväntar mig att värdena skulle vara. Har jag fel?

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

Loggat till konsolen:

'baz'
'bar'
'baz'

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

Loggat till konsolen:

'bar'
undefined
undefined

Svar #1

Det är ett intressant ämne. Du kan leka med två livscykelhakar för att lista ut hur det fungerar: ngOnChanges och ngOnInit.

I princip när du sätter standardvärde till Input betyder det att det endast kommer att användas om det inte finns något värde som kommer till den komponenten. Och det intressanta är att det kommer att ändras innan komponenten initieras.

Låt oss säga att vi har sådana komponenter med två livscykelhakar och en egenskap som kommer från 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

Komponent inkluderad i html utan definierat property-värde

Som resultat kommer vi att se i konsolen: Init default

Det betyder att onChange inte utlösts. Init utlösts och property-värdet är default som förväntat.

Situation 2

Komponent inkluderad i html med inställd egenskap <cmp [property]="'nytt värde'"></cmp>

Som ett resultat kommer vi att se i konsolen:

Ändrad nytt värde Objekt {}

Init nytt värde

Och den här är intressant. Först utlöste onChange-hooken, som satte property till new value, och det tidigare värdet var tomt objekt! Och först efter det utlöste onInit-hooken med det nya värdet av property.

Svar #2

Här är den bästa lösningen för detta. (ANGULAR Alla versioner)

Lösning: Att ange ett standardvärde för @Input-variabeln. Om inget värde skickas till den input-variabeln kommer den att ta standardvärdet.

Jag har tillhandahållit en lösning för denna typ av liknande fråga. Du kan hitta den fullständiga lösningen härifrån

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

Relaterade artiklar