Angular2动态附加DOM事件

Question

我正在为 Angular2 使用 Angular2 和 devextreme。我正在尝试从他们网站上的一个问题中添加一些功能，该问题要求将事件处理程序附加到 html 元素

    $('html').on('dxclick', function(event) {
        console.log('DxClick - Clicked');
    });

显然，在 angular2 中，这会令人不悦，所以我正在尝试弄清楚如何正确地做到这一点。我尝试了以下方法：

constructor(@Inject(EventManager) private eventManager: EventManager) {
    this.eventManager.addGlobalEventListener('html', 'dxclick', function(event: any) {
        console.log('DxClick Clicked');
    });
}

这只是导致“无法读取未定义的属性'addEventListener'”异常

public ngAfterViewInit() {
    let htmlElement: any = this.elementRef.nativeElement;
    while (htmlElement && htmlElement.localName !== 'html') {
        htmlElement = htmlElement.parentNode;
    }

    if (htmlElement) {
        this.eventManager.addEventListener(htmlElement, 'dxclick', function (event: any) {
            console.log('DxClick Clicked');
        });
    }
}

这段代码找到了html元素，addEventListener执行成功，但是回调函数从未执行。

是否可以重现 jQuery 代码，如果可以，我错过了什么。

Answer 1

您可以使用以下语法附加到组件中的全局事件，例如调整事件大小：

@HostListener('window:resize')
resizeWindow() {
    // window has been resized
}