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)">

或者你可以保留原来的原状，并在物业的吸气剂中调用管道：

模板：

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

Answer 3

使用管道进行双重绑定不起作用，您可以使用单向绑定和ngModelChange进行更新：

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

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

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

4 个答案: