以角度 2 将数据从组件传递到自定义管道答案

【问题标题】：Pass data to custom pipe from component in angular 2以角度 2 将数据从组件传递到自定义管道
【发布时间】：2016-01-10 23:32:40
【问题描述】：

如何将数据从组件传递到自定义管道？
我正在尝试将表单数据绑定到组件并传递给管道。

<input [(ngModel)]="phone" placeholder="Phone Number">

想要将“this.phone”从组件传递到“PhoneNum”管道。

这是在模板中完成的。
{{phoneNumber | PhoneNum}} // PhoneNum is the pipe

我的问题是通过控制器以这种方式在 AngularJS 中完成的

<input ng-model="phone placeholder="Phone Number">
$filter(‘PhoneNum’)($scope.phone); // something like this.
珍惜时间！

【问题讨论】：

标签： pipe angular

【解决方案1】：

由于管道只是一个实现PipeTransform接口的类，你可以通过providers属性将它注册到组件的注入器中：

import { MyPipe } from './my.pipe.ts';

@Component({
   ...
   providers:[MyPipe]
})

然后你可以通过DI将Pipe注入到任何组件（或子组件）的构造函数中，并通过调用transform方法来使用它：

export class MyComponent {
   private filteredData:Data[];
   constructor(private mypipe:MyPipe) {
       var data = [...];
       this.filteredData = this.mypipe.transform(data, []);
   }
};

或者如果你不想通过 DI 注册它，你可以在需要的时候实例化 Pipe：

export class MyComponent {
   private filteredData:Data[];
   constructor() {
       var data = [...];
       this.filteredData = new MyPipe().transform(data, []);
   }
};

【讨论】：

【解决方案2】：

我认为你不能使用双向数据绑定来做到这一点，但你可以将它分成两个单向绑定并通过管道过滤其中一个：

<input [ngModel]="phone" (ngModelChange)="phone = PhoneNum.transform($event)">

或者您可以保留原来的属性，并在属性的 getter 中调用管道：

模板：

<input type="text" [(ngModel)]="phone">

组件：

private _phone:string = 'test';

public get phone(){ return this.PhoneNum.transform(this._phone); }

public set phone(phone){ this._phone = phone; }

【讨论】：

【解决方案3】：

与管道的双重绑定将不起作用，您可以使用一种方式绑定和 ngModelChange 进行更新：

&lt;input [ngModel]="phone | PhoneNum" (ngModelChange)="phone = $event"&gt;

【讨论】：

这是唯一适用于 Angular 2.1.2 的解决方案唯一需要注意的是，有一个不应该存在的额外括号（不能只编辑一个字符）

【解决方案4】：

对我来说，仅使用以下解决方案是行不通的：

<input [ngModel]="phone | PhoneNum" (ngModelChange)="phone = $event">

问题：在用户必须关注输入元素之前，phone = $event 的分配并非适用于所有情况。

所以我建议使用 ALSO ElementRef 对象来处理原生输入元素：

HTML：

<input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)">

组件：

    onChangeAchievement(eventStr: string, eRef): string {

      //Do something (some manipulations) on input and than return it to be saved:

       //In case you need to force of modifing the Element-Reference value on-focus of input:
       var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, "");
       if (eventStr != eventStrToReplace) {
           eRef.value = eventStrToReplace;
       }

      return this.getNumberOnChange(eventStr);

    }

这里的想法：

让“(ngModelChange)”方法来做Setter工作：

(ngModelChange)="range=saverange($event, points)"
使用此调用启用对本机 Dom 元素的直接访问：

eRef.value = eventStrToReplace;

【讨论】：