Передать данные в пользовательский канал из компонента в угловых 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 Интерфейс, вы можете зарегистрировать его в инжекторе компонента через свойство provider:

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

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

Затем вы можете внедрить Pipe в конструктор любого компонента (или дочернего компонента) через DI и использовать его, вызвав метод 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, []);
   }
};

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 = $ не работало для всех случаев, пока пользователю не пришлось сфокусировать элемент ввода.

Поэтому я предлагаю использовать ALSO ElementRef Object для обработки собственного элемента ввода:

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

    }

Идея здесь:

1. Разрешение методу "(ngModelChange)" выполнить задание Setter:

   (ngModelChange) = "range = saverange ($ event, points)"

2. Включение прямого доступа к собственному элементу Dom с помощью этого вызова:

   eRef.value = eventStrToReplace;