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

Question

J'ai un Angular2 composant de ce composant, il dispose actuellement d'un tas de champs qui ont @Input() appliqué avant eux pour permettre la liaison à la propriété, c'est à dire

@Input() allowDay: boolean;

Ce que je voudrais faire est de se lier à une propriété avec get/set, de sorte que je peux faire une autre logique dans l'incubateur, quelque chose comme ce qui suit

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

comment pourrais-je le faire dans Angular2?

Basé sur Thierry Templier suggestion je l'ai changé, mais qui lève l'erreur ne Peut pas se lier à 'allowDay', car il n'est pas connu natif de la propriété :

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

Answer 1

Vous pouvez définir la @Input sur l’accesseur Set directement, comme décrit ci-dessous :

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

Answer 2

Si vous êtes principalement intéressé à la mise en œuvre de la logique pour le setter seulement:

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 l' SimpleChanges n'est pas nécessaire s'il n'est pas question d'entrée de la propriété a été modifiée ou si vous avez seulement une entrée de la propriété.

Angulaire Doc: OnChanges

sinon:

private _allowDay: boolean;

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

Answer 3

@Paul Cavacas, j’ai eu le même problème et j’ai résolu en mettant le `` décorateur au-dessus de l’accesseur Get.

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