Angular2中的解析器和格式化程序

Question

在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的分析器和格式化器.所以"管道"不是正确的答案.

Answer 1

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

                                            a.)模型 - >视图

     1>使用管道

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>使用指令

     5>使用ControlValueAccessor

     或使用上述任何一种的组合

                                            b.)查看 - >模型

     1>使用输出/事件

模板:

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/setters和使用FormControl输入字段来实现

• 我可以告诉你的tip of the iceberg这里,有这么多的model <> view转换,具有因那是什么Angular呢,Data Binding,one way or two way.

希望能帮助到你 :)

Answer 2

根据我的说法,在Angular 2中没有格式化器或解析器这样的概念,但你可以使用下面的代码实现它,它非常简单

在HTML中

 <input type="text"  [ngModel] = "formatter(ex)"  (ngModelChange)="parser($event)">

在代码中

export class Component{
     data:string = 'data';
     constructor(){}

     formatter(value){
        value = value.toUpperCase();   //manipulate the data according to your need
        return value;
     }

     parser(value){
         this.data = value.toLowerCase();  //manipulate the data according to your need
     }



}

您还可以根据需要实现$ formatters和$ parsers.

Answer 3

在 Angular2 中你使用管道。请参阅文档：https ://angular.io/docs/ts/latest/guide/pipes.html