Y at-il un moyen de faire une "transformation d'entrée" (un opposé à la pipe) dans Angular2?

Question

J'ai un tableau de mots-clés en tant que propriété de mon modèle. Maintenant, je veux montrer que l'un comme une chaîne séparée par une virgule dans une entrée et la transformer en tableau lorsque l'utilisateur tape.

J'ai créé un tuyau de jointure pour modifier la sortie, mais je ne sais pas comment obtenir un résultat similaire avec (ngModelChange), mais dans la direction opposée (transformer en un tableau de chaînes à partir d'une chaîne séparée par des virgules).

<input type="text" [ngModel]="model.keywords | join:', '," (ngModelChange)="model.keywords=$event"> 

Je sais que je peux ajouter une méthode sur un composant et le faire là-bas, mais si je dois faire cette opération sur de nombreux composants différents. Je voudrais enregistrer une fonction angulaire de sorte qu'elle soit disponible en html comme un tuyau.

Peut-être que ce n'est pas la meilleure façon de réaliser ce dont j'ai besoin du tout et que j'ai besoin de penser dans une autre direction?

Je peux voir 2 autres alternatives:

1. Créer un composant un composant pour l'entrée comme ça fera l'affaire, mais il peut arriver que je aurais besoin d'une autre (non-entrée), par exemple Ajouter une propriété supplémentaire sur le modèle et rendre le modèle lui-même responsable de la transformation (ou utiliser une classe pour les mots-clés au lieu d'un tableau de chaînes qui aura un constructeur séparé ou quelque chose, pas sûr comment connecter cela à angulaire modèle).

Answer 1

J'ai fini avec une solution simple d'ajouter la propriété/setter supplémentaire au modèle:

get keywordsString(): string { 
    if (this.keywords) { 
     return this.keywords.join(", "); 
    } 
    else { 
     return ""; 
    } 
} 

set keywordsString(input: string) { 

    if (input !== null) { 
     this.keywords = input.split(",") 
          .map(t => t.trim()) 
          .filter(t => t !== ""); 
    } 
    else { 
     this.keywords = []; 
    } 
} 

Ceci est beaucoup plus facile pour le cas simple que ControlValueAccessor suggéré dans les commentaires (ce qui est parfaitement valide , juste un peu trop lourd pour ce cas simple). Ensuite, je peux simplement utiliser [(ngModel)]="model.keywordsString" et cela fonctionne très bien, il semble.