[英]mat-spinner is not showing while loading angular app-root in index.html
要求:
我想在Angular
中加载<app-root>
时显示一个<mat-spinner>
代码尝试:
索引.html:
<body>
<app-root>Loading ...
<mat-spinner></mat-spinner>
</app-root>
</body>
应用程序模块.ts:
import {
...,
MatProgressSpinnerModule,
... }from '@angular/material';
@NgModule({
declarations: [
...
],
imports: [
...,
MatProgressSpinnerModule,
...
],
...
})
版本信息:
Angular CLI: 6.2.2
Node: 10.5.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
结果:
它显示Loading...
但不显示<mat-spinner>
,尝试单独使用 spinner 以及上面给出的“Loading...”文本,但结果相同 - <mat-spinner>
不显示。
我在这里错过了什么吗?
当应用程序最初加载时,angular 尚未加载App module
,因此它不知道此时的mat-spinner
是什么。
如果您想在加载模块之前显示任何东西,则需要使用非角度的东西。 你最好的镜头是gif-spinner
我使用自定义 css 和类来实现这一点。 所有这些代码都在index.html
中
<style>
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
.spinner{
width: 40px;
height: 40px;
margin-left: auto;
margin-right: auto;
}
.center-page{
display: flex;
width: calc(100vw - 40px);
height: calc(100vh - 40px);
align-items: center;
text-align: center;
}
.pulse {
animation: pulsate 1s ease-out;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 1.0
}
@keyframes pulsate {
0% {opacity: 1.0;}
49% {opacity: 1.0;}
50% {opacity: 0.0;}
100% {opacity: 0.0;}
}
</style>
<body>
<my-app>
<div class="center-page">
<img class="spinner rotating" src="yourImageToRotate.png">
</div>
</my-app>
</body>
结果是这个图像无休止地旋转
我还在一些项目中使用了纯 css 微调器,它的工作原理如下:
<style>.center-page{ display: flex; width:calc(100vw - 40px); height:calc(100vh - 40px); align-items: center; text-align: center; }.sk-cube-grid { width: 40px; height: 40px; margin-left: auto; margin-right: auto; }.sk-cube-grid.sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }.sk-cube-grid.sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }.sk-cube-grid.sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }.sk-cube-grid.sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } </style>
<div class="center-page"> <div class="sk-cube-grid"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div> </div>
正如其他人已经回答的那样; 在您的应用程序加载之前,使用角度组件不起作用。 您可以采用复制标记和样式的方法,在index.html
的<app-root>
中重现它,而不是使用与角度材料完全不同的微调器。
这是使用这种方法的要点的链接: https ://gist.github.com/DanRibbens/00dc9e971b0df9f58c3726885a2a59aa#file-index-html
在 app.component.html(具有选择器名称 app-root 的模板)中使用<mat-spinner></mat-spinner>
。
您可以使用ngIf
条件在模板中显示微调器,直到准备好显示所有必需的内容。 PFB样品
应用程序组件.html
<div *ngIf="isReady">
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
</div>
<mat-spinner *ngIf="!isReady"></mat-spinner>
应用程序组件.ts
constructor(){
setTimeout(() => {
this.isReady = true;
}, 5000);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.