在输入时将参数传递给 Angular 4 指令

Question

我有一个像这样的输入文本字段

<input type="text" class="form-control"  [inputTextFilter]="A" [ngModel]="name">

我的指令是：

import { Directive, Input, HostListener } from '@angular/core';

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

export class InputTextFilterDirective {
  @Input('inputTextFilter') params: string;

  @HostListener('keypress', ['$event'])
  onKeyUp(event: KeyboardEvent) {
    console.log('got parameters: '+this.params);
  }
}

我创建了一个名为“inputTextFilter”的指令，我想向其传递“A”参数。我传递的参数总是显示为未定义。

Answer 1

试试这个。

更新：

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

@Directive({
  selector: '[inputTextFilter]'
})
export class MyDirective {
  @Input('inputTextFilter') params: string;
  constructor(){}
  ngOnInit(){
     console.log(this.params)
  }
}

Answer 2

希望这对其他人有帮助...问题出在模板中。

当我将输入传递为 [myDirective]="A" 时，A 被解释为未定义的变量。既然我想传递字母 A，我应该说 [myDirective]="'A'"

Answer 3

在指令中尝试这样：

import {Directive, Input, ElementRef} from 'angular2/core';
@Directive({
    selector: '[inputTextFilter]'
})
class FocusDirective {
    @Input() inputTextFilter: any;
    protected ngOnChanges() {
         console.log('inputTextFilter', this.inputTextFilter);
    }
}

Answer 4

如果在遵循接受的 awnser 之后，任何人在指令内仍然未定义，请确保您尝试访问 ngOnInit 内部的变量而不是构造函数上的变量。

指令的构造函数在 Angular 初始化指令的输入之前被调用。