如何使用angular-2中的输入字段生成自定义指令？

我正在学习Angular-2并进行实验。我试图构建一个带有输入字段的angular-2指令。让我们描述一下，我有一个自定义指令，名为

custom.directive.ts

：

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

@Directive({
    selector: '[inputDir]',    
})

export class InputDirective{}

现在我在这里添加了一个输入字段，我想在app.component.ts中使用它

---

我怎么做呢？

你可以这样申报

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

@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  private _defaultColor = 'red';

  constructor(private el: ElementRef, private renderer: Renderer) { }

  @Input('myHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this._defaultColor);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

您可以在任何类似这样的元素中使用它作为属性

<p [myHighlight]="color">Highlight me!</p>

突出显示我

有关详细说明，请参阅此链接

---

您的查询没有描述您希望从custom指令中获得什么。请单击其中一个示例来演示指令的使用。