Angular 6 Renderer.listen to Directive事件

Question

我试图听一个元素的指令事件。 Renderer.listen没有拿起活动。

HTML代码：

<a click-elsewhere #assignmentOptions>
    <pp-click-dropdown [clickElement]="assignmentOptions">
        <a>Test Button</a>
    </pp-click-dropdown>
</a>

pp-click-dropdown.ts - clickElsewhere（）是'click-anywhere'指令中的指令事件。这是事件正常发射。我没有收到任何错误，Renderer.listen只是没有拿起指令事件。

import { Component, EventEmitter, Input, Output, Renderer, OnInit } from '@angular/core';

@Component({
    selector: 'pp-click-dropdown',
    templateUrl: 'panelply-click-dropdown.component.html',
})

export class PanelPlyClickDropdownComponent implements OnInit {
    @Input() clickElement: Element;
    @Output() onDropdownClick: EventEmitter<any> = new EventEmitter();

    private renderer: Renderer;

    constructor(_renderer: Renderer) {
        this.renderer = _renderer;
    }

    ngOnInit() {
        this.renderer.listen(this.clickElement, 'click', (event) => {
            this.toggleDropDown(event);
        }); // this line is working properly
        this.renderer.listen(this.clickElement, 'clickElsewhere', (event) => {
            console.log('clicked oustide')
            this.closeDropdown(event);
        }); // this line is not working
    }

    toggleDropDown(e) {
        this.isShown = !this.isShown;
        this.onDropdownClick.emit(e);
    }

    closeDropdown(event: Object) {
        if (event && event['value'] === true) {
            this.isShown = false;
        }
    }
}

click-anywhere.ts（指令）

import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output, HostListener } from '@angular/core';
import { Subscription } from 'rxjs';

@Directive({
    selector: '[click-elsewhere]'
})

export class ClickElsewhereDirective implements OnInit, OnDestroy {
    @Output() clickElsewhere: EventEmitter<Object>;

    constructor(private _elRef: ElementRef) {
        this.clickElsewhere = new EventEmitter();
    }

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const clickedInside = this._elRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            console.log('clicked outside source')
            this.clickElsewhere.emit(null);
        }
    }
}

这里有什么我想念的吗？听不起作用因为指令事件不是DOM事件吗？有没有办法做到这一点？

Answer 1

这不是我想要这样做的方式，因为我想要'click-others'和'pp-click-dropdown'来模块化，我不希望以后在不同的元素上遇到问题，但它有效：

<a click-elsewhere (clickElsewhere)="dropdown.isShown = false;" #assignmentOptions>
    <pp-click-dropdown #dropdown [clickElement]="assignmentOptions">
        <a>Test Button</a>
    </pp-click-dropdown>
</a>