有没有办法在 Angular2 中做一个 "input transformation" （与管道相反）？

Question

我有一组关键字作为我模型的属性。现在我想在输入中将其显示为逗号分隔的字符串，并在用户键入时将其转换回数组。

我创建了一个连接管道来修改输出，但我不知道如何使用 (ngModelChange) 实现类似的结果，但方向相反（从逗号分隔的字符串转换为字符串数组).

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

我知道我可以只在一个组件上添加一个方法并在那里执行，但是如果我需要在许多不同的组件上执行此操作怎么办。我想在 angular 中注册一些函数，以便它在 html 中像管道一样可用。

也许这根本不是实现我所需的最佳方式，我需要从其他方向思考？

我可以看到另外 2 个备选方案：

像这样为输入创建一个组件就可以了，但它可能会发生在其他一些（非输入）组件中，例如
在模型上添加一个额外的属性并让模型本身负责转换（或者对关键字使用 class 而不仅仅是一个字符串数组单独的构造函数或其他东西，不确定如何将其连接到 angular 模型）。

Answer 1

我最终得到了一个简单的解决方案，即向模型添加额外的 get/set 属性：

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

对于简单的情况，这比评论中建议的 ControlValueAccessor 容易得多（这是完全有效的，对于这种简单的情况来说有点太重了）。然后我就可以使用 [(ngModel)]="model.keywordsString" 并且看起来效果很好。

有没有办法在 Angular2 中做一个 "input transformation" （与管道相反）？

Is there any way to do an "input transformation" (an opposite to pipe) in Angular2?

angular

angular-pipe