angular - Angular2 中的解析器和格式化器

Question

Angular2 中parsers 和formatter 的处理方式是什么？

在 Angular1 中，可以使用 ngModelController 进行此类操作:

//model -> view
ngModelController.$formatters.push(function(modelValue) {
  return modelValue.toUpperCase();
});

//view -> model
ngModelController.$parsers.push(function(viewValue) {
  return viewValue.toLowerCase();
});

你能给我一个如何用 Angular2 做的例子吗？

---

UPD:Pipes 类似于 Angular1 中的Filters，但我寻找的不是过滤器，而是 的解析器和格式化器strong>ngModel。所以“管道”不是正确答案。

Answer 1

could you provide me an example how to do it with Angular2?

a.) 模型 -> View

---

1>使用 Pipes

TS:

myString: string = "ABCDEFGH";

模板:

{{myString | lowercase}}

输出:

abcdefgh

---

2>直接使用转换

模板:

Below Input field will have lowercase string as value

<input type="text" [value]="myString.toLowerCase()">

I'm also lowercase:  {{myString.toLowerCase()}}

输出:

Input field with value "abcdefgh"

I'm also lowercase:  abcdefgh

---

3>使用 Getter/Setter

TS:

myString: string = "ABCDEFGH";

get stillMyString() {
  return this.myString.toLowerCase();
}
set stillMyString(v) {
  this.myString = v;
}

模板:

{{stillMyString}}

输出:

abcdefgh

---

4>使用 Directives

---

5>使用ControlValueAccessor

---

或使用以上任意组合

---

b.) View -> 模型

---

1>使用Output/Events

模板:

Below Input field will get lowercase string as value but will store uppercase string

<input type="text" [value]="myString.toLowerCase()" (change)="myString = $event.toUpperCase()">

I'm give uppercase values automatically:  {{myString}}

输出:

Input field with initial value "abcdefgh"

I'm given uppercase values automatically:  ABCDEFGH

---

2>使用 Setter/Getter

TS:

myString: string = "ABCDEFGH";

get stillMyString() {
  return this.myString;
}
set stillMyString(s) {
  this.myString = s.toUpperCase();
}

模板:

Below Input field will get lowercase string as value but will store uppercase string

<input type="text" [value]="stillMyString.toLowerCase()" (change)="myString = $event">

Now I'm Uppercase:  {{stillMyString}}

输出:

Input field with initial value "abcdefgh"

I'm given uppercase values automatically:  ABCDEFGH

---

AND/OR 上述方法和我现在想不到的任何其他方法的组合。

---

总结

• 如您所见，有多种方法可以完成同一件事，这取决于您的需要和选择使用其中的任何一种。

• 验证 不是转换的关注点，但您可以通过改进 getter/setters 来实现并使用 FormControl在您的输入字段上

• 我可以给你看 tip of the iceberg在这里，有很多model <> view转换，因为这就是Angular确实，Data Binding , one way or two way .

希望对您有所帮助:)