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

Question

所以我在加载一些图像时显示了一个微调器，在 Chrome、Firefox、Edge 中...它在加载内容后消失了。微调器被图片取代。但是在 Internet Explorer 版本 9 和 10 中它保留在原位并且图片显示在下方。

来自组件模板：

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

来自组件：

private getContent() {
    this.loadingContent = true;

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

spinner.css

.spinner {
    width: 100%;
    height: 50px;
    margin: 100px auto;
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 400ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 400ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 400ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

Answer 1

检查此答案：https://github.com/angular/angular/issues/5774

In IE9/10 it's better to use [attr.data-hidden], because they want to use custom attributes only with "data-" prefix.

所以：

<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 - 在 IE 9 和 IE10 中加载内容后加载微调器不消失

Angular 4 - Loading spinner not dissapearing after content is loaded in IE9 & IE10

css

angular

internet-explorer-9

spinner

internet-explorer-10