angular - 需要更清楚地说明带有指令的“renderer2”

Question

在我的指令中，我添加了一个这样的事件监听器：

//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) );

    }

}

我如何理解上述行为？或者我的代码有什么问题？

Answer 1

 constructor(private renderer2: Renderer2, private el: ElementRef) {

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