Question

我无法在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 {
}

然而，当我加载页面时，页面正在加载，文本图像似乎正在加载（我在发布到我的服务器之后测试了这个，并添加了一个大的背景图像进行测试，显示为灰色框直到图像缓慢加载）。

我在这里错过了什么吗？

Answer 1

您的h1和div代码将不会显示，因为在运行时，角度会将组件模板放在app标记下。

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>

编辑：如果这是一个问题，你可以在应用程序之外显示加载程序的东西。

index.cshtml

<div asp-prerender-module="ClientApp/dist/main-server">
    <h1>APP IS LOADING</h1>
    <div class="loader"></div>
</div>
<app></app>

Angular 2 SPA加载屏幕未显示Visual Studio 2017

1 个答案: