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

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 标签将不会显示，因为在运行时 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>