如何在加载新页面之前添加旋转器？
如何在加载新页面之前添加旋转器？
提问于 2018-10-27 21:10:08
所以我想在ngx项目http://akveo.com/ngx-admin/中添加一个旋转器。
我已经将旋转器添加到我的index.html中，旋转器出现了，但是只有我的导航条被呈现，旋转器继续旋转模块应该显示的位置。导航条只在模块中调用它自己，而不是在路由模块中调用，这就是为什么我对它无法工作感到困惑的原因。
<body>
<app-root>Loading...</app-root>
<style>
@-webkit-keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0)
}
100% {
-moz-transform: rotate(360deg)
}
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
.spinner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1003;
background: #000000;
overflow: hidden
}
.spinner div:first-child {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
box-shadow: 0 3px 3px 0 rgb(25, 136, 2);
transform: translate3d(0, 0, 0);
animation: spin 2s linear infinite
}
.spinner div:first-child:after,
.spinner div:first-child:before {
content: '';
position: absolute;
border-radius: 50%
}
.spinner div:first-child:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
box-shadow: 0 3px 3px 0 rgb(85, 255, 6);
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite
}
.spinner div:first-child:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
box-shadow: 0 3px 3px 0 rgb(15, 109, 2);
animation: spin 1.5s linear infinite
}
</style>
<div id="nb-global-spinner" class="spinner">
<div class="blob blob-0"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="blob blob-4"></div>
<div class="blob blob-5"></div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-27 21:33:44
您应该将旋转器放在app-root元素的内部。当应用程序完成加载后，它将被角应用程序替换：
<body>
<app-root>
<!-- The spinner content goes here -->
</app-root>
</body>若要在加载特定视图时显示自旋器，可以将其包装在旋转器组件中：
import { Component } from '@angular/core';
@Component({
selector: 'spinner',
template: `
<style>
...
</style>
<div id="nb-global-spinner" class="spinner">
...
</div>
`,
})
export class SpinnerComponent { }并将其添加到适当的模块中：
...
import { HomeComponent } from './home.component';
import { SpinnerComponent } from './spinner.component';
@NgModule({
declarations: [
...
HomeComponent,
SpinnerComponent
],
...
})
export class MyModule { }在目标页面模板(例如home.component.html)中，您可以在页面仍在加载时使用ngIf ... else指令显示旋转器组件：
<div *ngIf="isDataReady; else spinner">
<!-- Normal page template here -->
</div>
<ng-template #spinner>
<spinner></spinner>
</ng-template>有关演示，请参见这一堆闪电战。在加载主页数据时，旋转器被显示。
Stack Overflow用户
发布于 2018-10-28 16:45:45
最好的方法是订阅路由器事件并相应地设置旋转器。
更多信息请看图片。
您可以在this.loading = true时显示旋转器，只需在app.component.html文件中使用*ngIf。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53026302
复制相关文章
相似问题
腾讯云开发者
