Question

所以我在加载一些图像时显示一个微调器，在Chrome，Firefox，Edge中...它在内容加载后消失。微调器被图片取代。但是在Internet Explorer版本9＆amp; 10它保持原位，图片显示在下面。

来自组件模板：

dispatch.yaml

来自组件：

<app-spinner [hidden]="!loadingContent"></app-spinner>
<app-content [hidden]="loadingContent"></app-content>

spinner.css

private getContent() {
    this.loadingContent = true;

    this.flightsService.getContent().map(data => {
        this.flights = data;
    }).subscribe(() => {
        this.loadingContent = true;
    }, () => {
        this.loadingContent = false;
    }, () => {
        this.loadingContent = false;
    });
}

Answer 1

在https://github.com/angular/angular/issues/5774

中查看此答案

在IE9 / 10中，最好使用[attr.data-hidden]，因为他们想要仅使用“data-”前缀使用自定义属性。

所以：

<app-spinner [attr.data-hidden]="!loadingContent"></app-spinner>
<app-content [attr.data-hidden]="loadingContent"></app-content>

Answer 2

您可以用

之类的内容替换[hidden]输入

<app-spinner [ngStyle]="{display:!loadingContent ?'none': 'inline'}"></app-spinner>
<app-content [ngStyle]="{display:loadingContent ?'none': 'inline'}"></app-content>

在IE中也可以正常工作

Angular 4 - 在IE9和IE中加载内容后加载微调器不会消失。 IE10

2 个答案: