Нужно больше ясности в `renderer2` с директивой - PullRequest
Новая
       19

Нужно больше ясности в `renderer2` с директивой

0 голосов
/ 06 июля 2018

В своей директиве я добавил прослушиватель событий, подобный этому: 

//this is works by default
this.el.nativeElement.onfocus = function(e){
 that.warpper.classList.add("show");
}
    //this is works not works default
this.el.nativeElement.onblur = function(e){
  that.warpper.classList.remove("show");
}

Затем я добавил следующую строку в директиву: 

this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

после того, как добавлено выше, это начало работ: 

this.el.nativeElement.onblur = function(e){
    that.warpper.classList.remove("show");
}

Также я не получаю никакой консоли по адресу: 

this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

вот мой код директивы: 

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { SharedDatasService } from '../shared/service/shared-datas.service';

@Directive({
    selector: '[fieldCleaner]'
})
export class FieldCleanerDirective {

    warpper:Element;
    link:any;

    constructor(private el:ElementRef, private renderer:Renderer2,
        private sharedData:SharedDatasService) {

        this.el.nativeElement.onfocus = function(e){
            that.warpper.classList.add("show");
        }

        this.el.nativeElement.onblur = function(e){
            that.warpper.classList.remove("show");
        }

        this.renderer.listen(this.el.nativeElement, 'onblur', ( event ) => console.log(event) );

    }

}

Как я могу понять вышеуказанное поведение? или что не так с моим кодом?

1 Ответ

0 голосов
/ 06 июля 2018 
 constructor(private renderer2: Renderer2, private el: ElementRef) {

        this.renderer2.listen(this.el.nativeElement, 'blur', () => { console.log('event fired'); });
    }
...