Как отправить значение входных данных в пользовательскую директиву в угловом-2?

Question

Я экспериментирую с пользовательскими директивами углового-2 базового, где я хочу разобрать входное значение в моей пользовательской директиве.

Позволяет взглянуть.

У меня есть компонент приложения, называемый app.component.ts. Где я взял поле ввода.

<input [(ngModel)] = "myInput"/> 

Далее я построить имя пользовательской директивы custom.directive.ts

import { Directive, ElementRef, Renderer} from '@angular/core'; 

@Directive ({ 
    selector : '[customDir]' 
}) 
export class CustomDirective{ 
    constructor(private el : ElementRef, private renderer: Renderer){ } 
} 

Теперь я хотел бы, чтобы ввести что-либо в «app.component.ts и разобрать его в моей пользовательской директивы, по которым я может просто напечатать его в консоли ..

Позволяет повторно изменить мой код ...

<app.component.ts> 
<input [(ngModel)] = "myInput" [customDir] = "myInput"/> 
<custom.directive.ts> 
import { Directive, ElementRef, Renderer, Input} from '@angular/core'; 

@Directive ({ 
    selector : '[customDir]' 
}) 

export class CustomDirective{ 
    @Input('customDir') myInput : any; 
    constructor(private el : ElementRef, private renderer: Renderer){ } 
    console.log(this.myInput); 
    } 

Но она не работает правильно. Печать ип определить ..

моя забота ...

1 ... Как я анализирую данные только против каждого нажатия клавиши ..?

Пожалуйста, предложите мне кто-нибудь ...

Answer 1

@Directive ({ 
    selector : '[customDir]', 
    exportAs: 'customDir' // <<<=== added 
}) 
export class CustomDirective{ 
    myInput : any; 
} 

и использовать его как

<input customDir #customDir="customDir" [(ngModel)]="myInputInApp" (ngModelChange)="customDir.myInput = $event"/> 

Первый customDir должен получить директива применяется на всех.

#customDir="customDir" является создание переменной шаблона, который имеет ссылку на директиву (требуется exportAs)

[(ngModel)]="customDir.myInput" связывается с директивой ссылается переменная #customDir шаблона и его собственности input. @Input() не требуется для этого случая, потому что здесь используется не угловая привязка.

Plunker example

Это должно работать, так и проще в использовании:

@Directive ({ 
    selector : '[customDir]', 
}) 
export class CustomDirective{ 

    @HostListener('ngModelChange', ['$event']) 
    onModelChange(event) { 
    console.log(event); 
    } 
} 

<input customDir [(ngModel)]="someOtherProp"/> 

Plunker example