Angular2中的解析器和格式化器

发布时间：2020-12-17 09:17:00 所属栏目：安全来源：网络整理

导读：在Angular2中做分析器和格式化的方式是什么？在Angular1中,可以使用ngModelController进行这样的操作： //model - viewngModelController.$formatters.push(function(modelValue) { return modelValue.toUpperCase();});//view - modelngModelController.$p

在Angular2中做分析器和格式化的方式是什么？

在Angular1中,可以使用ngModelController进行这样的操作：

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

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

你能给我一个例子说明如何使用Angular2？

UPD：管道类似于Angular1中的过滤器,但我不是为过滤器寻找,而是针对ngModel的分析器和格式化器.所以“管道”是不正确的答案.

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

a.)模型 – >视图

1 GT;使用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 GT;使用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.)视图 – >模型

1 GT;使用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

和/或上述方法的组合以及我现在无法想到的任何其他方法.

包起来

>你可以看到有多种方法来做同样的事情,这取决于你的需要和选择,使用它们.
>验证不是转换的问题,但是您可以通过改进getter / setter并在输入字段中使用FormControl来实现
>我可以在这里向你展示冰山一角,有这么多东西可以模拟<>查看转换,因为这是Angular所做的,Data Binding,一种或两种方式.

希望它帮助:)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!