将参数传递给 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

在指令中这样尝试：

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

Answer 3

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

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

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

Pass parameter to Angular 4 directive on input

angular2-directives

angular

更新：