IP Girl
  1. IP Girl
  3. Angular2 @Input vers une propriété avec get / set
Intereting Posts
Y a-t-il quelque chose comme “Firebug for IE” (pour déboguer JavaScript)? Ces lignes de code JavaScript sont-elles équivalentes? Pourquoi mes rails sont-ils annulés lorsque j’essaie d’utiliser user.save? Comment supprimer un champ de params Correction d’une “colonne inconnue” d’avertissement multiple Comment décrire la forme de la carte Immutable.js avec Flow Authentification de base HTTP sur SSL pour l’API REST java.lang.IllegalStateException: impossible d’effectuer cette action après onSaveInstanceState Comment déployez-vous votre application WSGI? (et pourquoi c’est la meilleure façon) Quel est le moyen le plus simple de tester si un nombre est une puissance de 2 en C ++? Comment utiliser correctement Google Plus Connexion avec plusieurs activités? Qu’est-ce qu’un graphique promotionnel et caractéristique dans Android Market / Play Store? CoreData + iCloud + Cascade Supprimer – comment gérer? Algorithme de hachage rapide de chaînes avec des taux de collision faibles avec un entier de 32 bits Impossible de se lier à ‘formGroup’ car ce n’est pas une propriété connue de ‘form’

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