Angular2 @Input vers une propriété avec get / set

J’ai un composant Angular2 dans ce composant, il a actuellement un groupe de champs qui ont @Input () appliqué avant eux pour permettre la liaison à cette propriété, c.-à-d.

@Input() allowDay: boolean; 

Ce que je voudrais faire, c’est de créer une liaison avec une propriété avec get / set, de manière à pouvoir faire une autre logique dans le setter, comme ceci:

  _allowDay: boolean; get allowDay(): boolean { return this._allowDay; } set allowDay(value: boolean) { this._allowDay = value; this.updatePeriodTypes(); } 

Comment pourrais-je faire cela dans Angular2?

Basé sur la suggestion de Thierry Templier, je l’ai changé, mais cela jette l’erreur Impossible de lier à ‘allowDay’ car ce n’est pas une propriété native connue:

 //@Input() allowDay: boolean; _allowDay: boolean; get allowDay(): boolean { return this._allowDay; } @Input('allowDay') set allowDay(value: boolean) { this._allowDay = value; this.updatePeriodTypes(); } 

Vous pouvez définir le @Input directement sur le setter, comme décrit ci-dessous:

 _allowDay: boolean; get allowDay(): boolean { return this._allowDay; } @Input('allowDay') set allowDay(value: boolean) { this._allowDay = value; this.updatePeriodTypes(); } 

Voir ce plunkr: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview .

Si vous êtes principalement intéressé par l’implémentation de la logique dans le setter uniquement :

 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; // [...] export class MyClass implements OnChanges { @Input() allowDay: boolean; ngOnChanges(changes: SimpleChanges): void { if(changes['allowDay']) { this.updatePeriodTypes(); } } } 

L’importation de SimpleChanges n’est pas nécessaire si la propriété en entrée n’a pas été modifiée ou si vous ne possédez qu’une seule propriété en entrée.

Doc angular: Modifications

autrement:

 private _allowDay: boolean; @Input() set allowDay(value: boolean) { this._allowDay = value; this.updatePeriodTypes(); } get allowDay(): boolean { // other logic return this._allowDay; } 

@Paul Cavacas, j’avais le même problème et j’ai résolu en plaçant le décorateur Input() au-dessus du getter.

  @Input('allowDays') get in(): any { return this._allowDays; } //@Input('allowDays') // not working set in(val) { console.log('allowDays = '+val); this._allowDays = val; } 

Voir ce plunker: https://plnkr.co/edit/6miSutgTe9sfEMCb8N4p?p=preview