将数据从角度2中的组件传递到自定义管道

Question

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

<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.
欣赏时间!

Answer 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注册它,您可以在需要时实例化管道:

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

Answer 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; }