Wie Eingangsdatenwert in benutzerdefinierte Anweisung in Winkel-2 zu senden?

Question

Ich experimentiere mit benutzerdefinierten Direktiven von angular-2 basic, wo ich einen Eingabewert in meiner benutzerdefinierten Direktive analysieren möchte.

Werfen wir einen Blick.

Ich habe eine App-Komponente namens app.component.ts. Wo ich ein Eingabefeld genommen habe.

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

nächstes baue ich eine benutzerdefinierte Richtlinie Name Jetzt

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

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

custom.directive.ts ich in „app.component.ts zur Eingabe etwas möchte und es in meiner benutzerdefinierten Richtlinie analysieren, durch die ich drucken sie es einfach in der Konsole können ..

Lets Wieder meinen Code ändern ...

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

Aber es wird nicht funktionieren richtig. Drucke un definieren ..

Meine Sorge ist ...

1 ... Wie ich die Daten nur gegen die jeden Tastendruck analysieren ..?

Bitte machen Sie mir jemand ...

Answer 1

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

und verwenden Sie es wie

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

Die erste customDir ist die Richtlinie überhaupt angewendet werden.

#customDir="customDir" ist eine Template-Variable zu erstellen, die einen Verweis auf die Richtlinie (erfordert exportAs)

[(ngModel)]="customDir.myInput" bindet sich an die Richtlinie durch die Template-Variable #customDir und seine Eigenschaft input verwiesen hat. @Input() ist für diesen Fall nicht erforderlich, da hier keine Winkelbindung verwendet wird.

Plunker example

Dies sollte auch funktionieren und ist einfacher zu bedienen:

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

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

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

Plunker example