Gibt es eine Möglichkeit, in Angular2 eine "Eingangstransformation" (ein Gegenteil von pipe) zu machen?

Question

Ich habe eine Reihe von Schlüsselwörtern als eine Eigenschaft meines Modells. Jetzt möchte ich diese als kommagetrennte Zeichenfolge in einer Eingabe anzeigen und sie in ein Array zurücktransformieren, wenn der Benutzer schreibt.

Ich habe eine Join-Pipe erstellt, um die Ausgabe zu ändern, aber ich weiß nicht, wie man ein ähnliches Ergebnis mit der (ngModelChange) erreicht, aber die entgegengesetzte Richtung (Umwandlung in ein String-Array von Komma getrennte Zeichenfolge).

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

Ich weiß, ich kann nur eine Methode für eine Komponente hinzufügen, und es gibt zu tun, aber was, wenn ich diese Operation auf vielen verschiedenen Komponenten tun müssen. Ich möchte eine Funktion in angular registrieren, so dass es in HTML wie eine Pipe verfügbar ist.

Vielleicht ist das nicht der beste Weg, um das zu erreichen, was ich brauche und ich muss in eine andere Richtung denken?

Ich kann zwei andere Alternativen sehen:

1. eine Komponente erstellen für die Eingabe wie das wird es tun, aber dann kann es passieren, ich in einer anderen (nicht-Eingang) Komponente benötigen würde z.B.

2. Fügen Sie eine zusätzliche Eigenschaft in das Modell ein und machen Sie das Modell selbst für die Transformation verantwortlich (oder verwenden Sie eine Klasse für Schlüsselwörter anstelle eines String-Arrays mit einem separaten Konstruktor oder etwas, nicht sicher, wie Sie dieses an eckig anbinden) Modell).

Answer 1

landete ich mit einer einfachen Lösung Hinzufügen zusätzlichen get/set-Eigenschaft auf das Modell nach oben:

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 = []; 
    } 
} 

Das ist viel einfacher für den einfachen Fall als ControlValueAccessor in Kommentaren vorgeschlagen (was durchaus gültig ist , nur ein bisschen zu schwer für diesen einfachen Fall). Dann kann ich einfach [(ngModel)]="model.keywordsString" verwenden und es funktioniert sehr gut es scheint.