Question

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

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

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

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

也许这不是达到我需要的最佳方式，我需要在其他方向思考？

我可以看到另外两种选择：

为输入创建一个组件，就像那样可以解决问题，但是在其他一些（非输入）组件中可能会发生这种情况，例如
在模型上添加一个额外的属性，让模型本身负责转换（或者使用一个类来表示关键字，而不只是一个字符串数组，它将有一个单独的构造函数或者其他东西，不知道如何将它连接到角度模型）。

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中进行“输入转换”（与管道相反）？

1 个答案: