Przekazywanie danych do niestandardowej rury z komponentu o kątowym 2

Question

Jak mogę przekazać dane do niestandardowej rury z komponentu?
Próbuję powiązać dane formularza z komponentem i przekazać do potoku.

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

chce przekazać this.phone '' do rurociągu 'PhoneNum' od elementu.

Odbywa się to w szablonie.
{{phoneNumber | PhoneNum}} // PhoneNum is the pipe

Moje pytanie jest wykonywana w angularjs w ten sposób ze sterownika

<input ng-model="phone placeholder="Phone Number">
$filter(‘PhoneNum’)($scope.phone); // something like this.
Doceń czas!

Answer 1

Nie sądzę, można to zrobić na dwukierunkowy wiązania danych, ale można podzielić go na dwie jednokierunkowe wiązań i filtrować jeden z nich za pośrednictwem rury:

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

lub można pozostawić oryginalne propery prostu tak jest i wywołać rurę w getter nieruchomości:

szablon:

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

komponent:

private _phone:string = 'test'; 

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

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

Answer 2

Ponieważ rura jest właśnie klasa, która implementuje interfejs PipeTransform, można zarejestrować go z wtryskiwacza komponentu poprzez własności dostawców:

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

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

Następnie można wstrzyknąć rurze do konstruktora dowolnego komponentu (lub elementu potomnego) za pomocą DI i użyj go, wywołując metodę transformacji:

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

lub jeśli nie chcesz, aby zarejestrować go przez DI, można po prostu instancję rury, gdy jej potrzebujesz:

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

Answer 3

Podwójne wiązanie z rurami nie zadziała, można użyć wiązania w jedną stronę i ngModelChange do aktualizacji :

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

Answer 4

Dla mnie, używając tylko następujące rozwiązanie nie działa:

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

Problem: Przypisanie telefonu = $ razie nie działa we wszystkich przypadkach, dopóki użytkownik musiał skupić się element wejściowy.

więc proponuję korzystania TAKŻE ElementRef obiektu do obsługi natywnego elementu wejściowego:

HTML:

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

Składnik:

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

    } 

Chodzi tutaj:

1. Letting "(ngModelChange)" sposób zrobić ustawiająca pracy:

   (ngModelChange) = "range = saverange ($ zdarzenie wskazuje)"

2. umożliwiające bezpośredni dostęp do natywnego Element Dom używający tego połączenia:

   eRef.value = eventStrToReplace;