Question

是否有一种方法可以监听customDirective中lib-test组件中的自定义事件customDirective，而他们彼此之间却一无所知？

当前实现仅适用于本地事件。

<lib-test [customDirective]="'actionComplete'></lib-test>

@Directive({ selector: '[`customDirective`]' })
export class CustomDirective implements AfterContentInit {
  @Input() customDirective: string;

  constructor(private elRef: ElementRef, private renderer: Renderer2) { }

  ngAfterContentInit() {
    this.renderer.listen(
      this.elRef.nativeElement,
      this.customDirective || 'click',
      (event: Event) => this.trackEvent(event)
    );
  }
}

@Component({
  selector: 'lib-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {
  @Output() actionComplete: EventEmitter<void> = new EventEmitter<void>();
}

Answer 1

您的实现仅适用于本地DOM事件（例如wordlist.filter(x => filterwords.contains(x))和click），因为mouseout仅侦听DOM事件，而不是Angular的Renderer2.listen事件。

要实现目标，您应该编写如下内容：

Output()

如果要编写适用于本机和自定义事件的组合指令，请参见this demo。它包含constructor( private view: ViewContainerRef, ) {} ngAfterContentInit() { let component = this.view["_data"].componentView.component (component[this.CustomEvent] as EventEmitter<any>) .subscribe(event => this.trackEvent(event)); } }，NativeEventDirective和CustomEventDirective。

监听指令中的自定义组件事件

1 个答案: