我无法使用 VS 2017 社区在我的 Angular 2 SPA 模板上显示加载屏幕。
我的 index.cshtml 中有以下内容。
<app asp-prerender-module="ClientApp/dist/main-server">
<h1>APP IS LOADING</h1>
<div class="loader"></div>
</app>
我的 .loader 类(在我的 app.component.css 文件中)
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
我的app.component.html是;
<nav-menu></nav-menu>
<hero></hero>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer></footer>
我的 app.component.ts 在哪里;
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
但是,当我加载页面时,页面正在加载并且文本图像似乎正在动态加载(我也在发布到我的服务器后测试了这个,并添加了一个大背景图像来测试,它显示为灰色框,直到图像缓慢加载)。
我是不是漏掉了什么?
最佳答案
您的 h1
和 div
标签将不会显示,因为在运行时 Angular 会将组件模板放在您的 app
标签下。
Angular 加载时在运行时的 index.html
<app>
<nav-menu></nav-menu>
<hero></hero>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
</app>
将加载程序的标签包含到您的模板中,它们将在其中显示。
app.component.html
<nav-menu></nav-menu>
<hero></hero>
<div asp-prerender-module="ClientApp/dist/main-server">
<h1>APP IS LOADING</h1>
<div class="loader"></div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12 body-content'>
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer></footer>
编辑: 如果这是一个问题,您可以在应用程序外部显示加载器内容。
索引.cshtml
<div asp-prerender-module="ClientApp/dist/main-server">
<h1>APP IS LOADING</h1>
<div class="loader"></div>
</div>
<app></app>
关于javascript - Angular 2 SPA 加载屏幕未显示 Visual Studio 2017,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47657310/