Angular2中的解析器和格式化程序 [英] Parsers and Formatters in Angular2
问题描述
在Angular2中做解析器和格式化程序的方式是什么?
What is the way of doing parsers and formatter in Angular2?
在Angular1中，可以使用ngModelController进行此类操作:
in Angular1 it was possible to do such manipulations with ngModelController:
//model -> view
ngModelController.$formatters.push(function(modelValue) {
return modelValue.toUpperCase();
});
//view -> model
ngModelController.$parsers.push(function(viewValue) {
return viewValue.toLowerCase();
});
您能否提供一个示例，说明如何使用Angular2?
could you provide me an example how to do it with Angular2?
UPD :管道类似于Angular1中的过滤器，但我不是在寻找过滤器，而是寻找 ngModel .因此，管道"是不正确的答案.
UPD: Pipes are similar to Filters in Angular1, but I'm looking not for Filters, but for Parsers and Formatters for ngModel. So "Pipes" is not correct answer.
推荐答案
您能否提供一个示例，说明如何使用Angular2?
could you provide me an example how to do it with Angular2?
a.)模型->查看
1>使用管道
TS:
a.) model -> view
1> Using Pipes
TS:
myString: string = "ABCDEFGH";
模板:
{{myString | lowercase}}
输出:
abcdefgh
2>直接使用转换
模板:
2> Using transformation directly
Template:
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:
3> Using Getter/Setter
TS:
myString: string = "ABCDEFGH";
get stillMyString() {
return this.myString.toLowerCase();
}
set stillMyString(v) {
this.myString = v;
}
模板:
{{stillMyString}}
输出:
abcdefgh
4>使用指令
5>使用 ControlValueAccessor
或同时使用以上任意一种
4> Using Directives
5> Using ControlValueAccessor
OR using a combination of any of the above
模板:
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:
2> Using 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
和/或上述方法与我现在无法想到的任何其他方法的组合.
-
您可以看到有多种方法可以执行相同的操作，这仅取决于您的需要和使用任何一种方法的选择.
As you can see there are multiple ways to do the same thing, it just depends upon your need and choice to use any of it.
验证与转换无关，但您可以通过改进getter/setters并在输入字段上使用FormControl来实现.
Validation is not the concern of transformation, but you can do it by improving upon the getter/setters and using FormControl on your input fields
我可以在这里向您展示tip of the iceberg，因为Angular，Data Binding，one way or two way就是这样，所以model <> view转换有很多.
I could just show you the tip of the iceberg here, there is so much to model <> view transformations, becasuse that's what Angular does, Data Binding, one way or two way.
希望对您有所帮助:)
这篇关于Angular2中的解析器和格式化程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
