Question

我有一个可在Chrome和IE11中使用的“ popover” /帮助文本指令。迫在眉睫的问题是，IE似乎没有触发可导致帮助文本可见的mouseenter事件。在IE11中（但在Chrome中）从未达到该功能中的调试器行。这是伪指令中的一些相关代码：

public  ngAfterViewInit(): void {
    this.createPopover();
}

@HostBinding('class.visible') private visible: boolean;

@HostListener('mouseenter')
onMouseEnter(): void {
    debugger;
    this.visible = true;
    this.detectElementInViewport();
}

public createPopover(): void {
    this.popover = this.renderer.createElement("div");
    this.popover.innerHTML = this.config.text;
    this.popover.className += 'popover-content';

    //if config as a position set it, otherwise default it to top
    if(this.config.position) {
        this.renderer.addClass(this.el.nativeElement, this.config.position);
    } else {
        this.renderer.addClass(this.el.nativeElement, 'top');
    }

    //add popover container class for styling purposes
    this.renderer.addClass(this.el.nativeElement, 'popover-container');
    this.renderer.appendChild(this.el.nativeElement, this.popover);
}

我所做的研究表明，polyfills.ts中的以下几行对IE很重要，正如您从此粘贴中所看到的，它们没有注释。我还完成了建议的classlist.js安装。

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import "core-js/es6/symbol";
import "core-js/es6/object";
import "core-js/es6/function";
import "core-js/es6/parse-int";
import "core-js/es6/parse-float";
import "core-js/es6/number";
import "core-js/es6/math";
import "core-js/es6/string";
import "core-js/es6/date";
import "core-js/es6/array";
import "core-js/es6/regexp";
import "core-js/es6/map";
import "core-js/es6/weak-map";
import "core-js/es6/set";

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import "classlist.js";  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import "core-js/es6/reflect";

我要介绍的另一件事是两个浏览器中的开发工具生成的HTML。除了元素上的属性顺序外，其他外观均相同：

<!-- Chrome -->

<help-text _ngcontent-c11="" _nghost-c12="" ng-reflect-question="[object Object]" ng-reflect-position="top">
    <!--bindings={
    "ng-reflect-ng-if": "<p>Here is a help text</p>"
}-->
    <div _ngcontent-c12="" class="float-right">
        <svg-icon _ngcontent-c12="" icon="icon-info" ng-reflect-icon="icon-info" ng-reflect-config="[object Object]" class="top popover-container">
            <!--bindings={
    "ng-reflect-ng-if": "true"
}--><svg class="icon" focusable="false">
                <use xlink:href="#icon-info"></use>
            </svg><div _ngcontent-c12="" class="popover-content">
                <p>Here is a help text</p>
            </div>
        </svg-icon>
    </div>
</help-text>

<!-- IE -->

<help-text _ngcontent-c11="" _nghost-c12="" ng-reflect-question="[object Object]" ng-reflect-position="top">
    <!--bindings={
    "ng-reflect-ng-if": "<p>Here is a help text</p>"
}-->
    <div class="float-right" _ngcontent-c12="">
        <svg-icon class="top popover-container" icon="icon-info" ng-reflect-icon="icon-info" _ngcontent-c12="" ng-reflect-config="[object Object]">
            <!--bindings={
    "ng-reflect-ng-if": "true"
}--><svg xmlns="http://www.w3.org/2000/svg" class="icon" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info" />
            </svg><div class="popover-content" _ngcontent-c12="">
                <p>Here is a help text</p>
            </div>
        </svg-icon>
    </div>
</help-text>

Answer 1

尽管使用了polyfill，但IE似乎仍然无法处理SVG。将指令移至周围的div。它使样式有点混乱，但希望不会成为破坏交易的事情。

旧：

<div class="float-right" *ngIf="question.helpText">
    <svg-icon icon="icon-info" [popover]="{ text: question.helpText, position: position }"></svg-icon>
</div>

新功能：

<div class="float-right no-margin no-padding" *ngIf="question.helpText" [popover]="{ text: question.helpText, position: position }">
    <svg-icon icon="icon-info"></svg-icon>
</div>

为什么Angular（5）HostListener事件在Chrome中有效，但在IE中不起作用？

1 个答案: