Angular 4 - 在IE9和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;
    });
}

旋转器.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

您可以将[hidden]输入替换为类似

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

在IE中也能正常工作

Answer 2

在以下

位置检查此答案： 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>