Node.js 在index.html中加载angular应用程序根时未显示mat微调器
要求：Node.js 在index.html中加载angular应用程序根时未显示mat微调器,node.js,angular,angular-material,Node.js,Angular,Angular Material,要求： 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 我想在角度中加载时显示 已尝试代码： Angular CLI: 6.2.2 Node
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
角度中加载
时显示
已尝试代码：
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
index.html：
版本信息：
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
结果：
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
它显示加载…
但不显示
，尝试单独使用spinner以及上面给出的“加载…”文本，但结果相同-
不显示
我在这里遗漏了什么吗？在app.component.html（具有选择器名称app root的模板）中使用
您可以使用ngIf
条件在模板中显示微调器，直到所有必需的内容都准备好显示为止。PFB样品
app.component.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>
我使用自定义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>
@-webkit关键帧旋转/*Safari和Chrome*/{
从{
-webkit变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧旋转{
从{
-ms变换：旋转（0度）；
-moz变换：旋转（0度）；
-webkit变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-ms变换：旋转（360度）；
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
.轮换{
-webkit动画：旋转2s线性无限；
-moz动画：旋转2s线性无限；
-ms动画：旋转2s线性无限；
-o动画：旋转2s线性无限；
动画：旋转2s线性无限；
}
斯宾纳先生{
宽度：40px；
高度：40px；
左边距：自动；
右边距：自动；
}
.中间页{
显示器：flex；
宽度：计算（100vw-40px）；
高度：计算（100vh-40px）；
对齐项目：居中；
文本对齐：居中；
}
.脉搏{
动画：脉动1s放松；
-webkit动画：脉动2秒放松；
-webkit动画迭代计数：无限；
不透明度：1.0
}
@关键帧跳动{
0%{不透明度：1.0；}
49%{不透明度：1.0；}
50%{不透明度：0.0；}
100%{不透明度：0.0；}
}
结果就是这张图像无休止地旋转
在一些项目中，我还使用了纯css微调器，其工作原理如下：
.中间页{
显示器：flex；
宽度：计算（100vw-40px）；
高度：计算（100vh-40px）；
对齐项目：居中；
文本对齐：居中；
}
.sk立方体网格{
宽度：40px；
高度：40px；
左边距：自动；
右边距：自动；
}
.sk多维数据集网格.sk多维数据集{
宽度：33%；
身高：33%；
背景色：#333；
浮动：左；
-webkit动画：sk cubeGridScaleDelay 1.3s无限轻松输入输出；
动画：sk cubeGridScaleDelay 1.3s无限轻松输入输出；
}
.sk立方体网格.sk-cube1{
-webkit动画延迟：0.2s；
动画延迟：0.2s；}
.sk立方体网格.sk-cube2{
-webkit动画延迟：0.3s；
动画延迟：0.3s；}
.sk立方体网格.sk-cube3{
-webkit动画延迟：0.4s；
动画延迟：0.4s；}
.sk立方体网格.sk-cube4{
-webkit动画延迟：0.1s；
动画延迟：0.1s；}
.sk立方体网格。sk-cube5{
-webkit动画延迟：0.2s；
动画延迟：0.2s；}
.sk立方体网格。sk-cube6{
-webkit动画延迟：0.3s；
动画延迟：0.3s；}
.sk立方体网格.sk-cube7{
-webkit动画延迟：0秒；
动画延迟：0s；}
.sk立方体网格.sk-cube8{
-webkit动画延迟：0.1s；
动画延迟：0.1s；}
.sk立方体网格。sk-cube9{
-webkit动画延迟：0.2s；
动画延迟：0.2s；}
@-webkit关键帧sk cubeGridScaleDelay{
0%, 70%, 100% {
-webkit转换：scale3D（1,1,1）；
变换：scale3D（1,1,1）；
} 35% {
-webkit转换：scale3D（0,0,1）；
变换：scale3D（0,0,1）；
}
}
@关键帧sk cubeGridScaleDelay{
0%, 70%, 100% {
-webkit转换：scale3D（1,1,1）；
变换：scale3D（1,1,1）；
} 35% {
-webkit转换：scale3D（0,0,1）；
变换：scale3D（0,0,1）；
}
}
当应用程序最初加载angular时，尚未加载应用程序模块
，因此它不知道此时的垫微调器是什么
如果您想在加载模块之前显示任何内容，则需要使用非角度的内容。正如其他人已经回答的那样，你最好的镜头是一个gif旋转器；在应用程序加载之前，使用角度组件不起作用。与使用与angular材质完全不同的微调器不同，您可以采取复制标记和样式的方法，在组件选择器内部的中复制它，如果您编写任何其他选择器，该选择器将被该组件的模板移除/替换为angular，这就是微调器不可见的原因。您应该为此使用内容投影。@ashispal，谢谢。。让我检查一下..我使用了自定义css和一些div来实现这一点，但没有使用任何外部组件/模块。“这能帮你吗？”雅格布西安皮我试过这种方法，但对我无效。。你能给我一些示例代码或任何参考链接吗？为什么超时功能？加载可能需要5秒钟，也可能不需要5秒钟，对吗？如果以这种方式使用，我们可以使用ngInit设置isReady对吗？但还是b