Angular 6 Renderer.listen to Directive событие - PullRequest
Новая
       17

Angular 6 Renderer.listen to Directive событие

0 голосов
/ 28 апреля 2019

Я пытаюсь прослушать директивное событие для элемента. 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-elsewhere. Это событие излучает правильно. Я не получаю никаких ошибок, 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-elsewhere.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? Есть ли способ сделать это?

1 Ответ

0 голосов
/ 28 апреля 2019

Это не совсем то, что я хотел сделать, потому что я хочу, чтобы «click-elsewhere» и «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>
...