Javascript 角度：输出自定义指令事件的回调，并在组件中订阅它

在我的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')
      });
    }
  }
}

@指令({
选择器：“[appCustomEdit]”
})
导出类CustomEditDirective实现OnChanges{
@Input（）appCustomEdit:布尔值；
私有元素：任何；
构造函数（私有el:ElementRef，私有呈现器：Renderer2）{
this.element=el.nativeElement；
}
ngOnChanges（更改：SimpleChanges）{
if（changes.appCustomEdit.currentValue）{
常量btnElement=（this.element）
.querySelector（“.dx链接保存”）；
this.renderer.listen（b元素，'click'，（）=>{
警报（'已单击Buton'）
});
}
}
}

在myComponent.html中，我使用以下指令：

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

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

我想知道怎么做？

---

建议？

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

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>

---

但是，目前还不清楚您想用它实现什么，因此我无法确定这是否是一条可行的道路。

不确定是否有人会理解您的代码。您试图从中获得什么：

constbtneelement=（this.element）.querySelector（'.dx link save'）？构造函数中注入的ElementRef是您的按钮（即
）元素。你还在找什么？