我正在尝试使用angular-2 basic的自定义指令,我要在自定义指令中解析输入值。
让我们看看。
我有一个名为app.component.ts的app组件。我在哪里采取了输入字段。
<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 ...我如何根据每个按键解析数据..?
请建议我任何人......
答案 0 :(得分:4)
@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()
,因为它不是此处使用的Angular绑定。
这应该也可以使用,并且更容易使用:
@Directive ({
selector : '[customDir]',
})
export class CustomDirective{
@HostListener('ngModelChange', ['$event'])
onModelChange(event) {
console.log(event);
}
}
<input customDir [(ngModel)]="someOtherProp"/>