Angular ：输出我的自定义指令事件的回调并在我的组件中订阅它

Question

在我的 Angular 应用程序下，我完成了自定义指令：

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

export class CustomEditDirective implements OnChanges {

  @Input() appCustomEdit: boolean;
  private element: any;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.element = el.nativeElement;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.appCustomEdit.currentValue) {
      const btnElement = (<HTMLElement>this.element)
        .querySelector('.dx-link-save');

      this.renderer.listen(btnElement, 'click', () => {
        alert('Buton was clicked')
      });
    }
  }
}

在 myComponent.html 我正在使用这个指令 :

<div>
  <input [appCustomEdit]=true></input> 
</div>

我现在需要实现指令输出的一些事件/可观察值，以便我可以在 myComponent.ts 中订阅它并执行一些操作。

不知道怎么办？

建议 ?

Answer 1

好吧，您的问题的直接答案如下：

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

@Directive({
    selector: '[appCustomInput]'
})
export class CustomInputDirective {

    @Output()
    myCustomEvent = new EventEmitter();

    @HostListener('click')
    onClick() {
        this.myCustomEvent.emit();
    }

}

然后像这样使用它：

<div>
  <input appCustomInput (myCustomEvent)="onMyCustomEvent()"></input> 
</div>

但是，目前尚不清楚您想要通过此实现什么，所以我无法确定这是否可行。

Angular ：输出我的自定义指令事件的回调并在我的组件中订阅它

Angular : Output a callback of my Custom directive event and subscribe to it in my component

javascript

angular2-directives

angular2-template

angular

angular5