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

【问题标题】：Angular 2 SPA loading screen not showing Visual Studio 2017Angular 2 SPA 加载屏幕未显示 Visual Studio 2017
【发布时间】：2017-12-05 15:34:30
【问题描述】：

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

但是，当我加载页面时，页面正在加载并且文本图像似乎正在动态加载（我也在发布到我的服务器后对此进行了测试，并添加了一个大背景图像进行测试，它显示为灰色框直到图像慢慢加载）。

我错过了什么吗？

【问题讨论】：

我猜app组件使用封装模式Emulated。在这种情况下，您必须使用 ::ng-deep > .loader
我明白你的意思，但这并不能解释为什么 h1 至少没有出现？即在加载所有角度视图之前，它的显示似乎没有显示节点内的 html？
如果你的 AppComponent 模板不包含标签，那么 h1 和 div 就没有可以渲染的地方。它们将被忽略。
嗯，我更新了问题以包含我的 app.component 文件，这样你就可以看到我的路由器插座，这有帮助吗？

标签： javascript css angular

【解决方案1】：

您的 h1 和 div 标签将不会显示，因为在运行时 Angular 会将组件模板放在您的 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>

【讨论】：

感谢您的回答，能否请您为我澄清一下（角度 2 的新手）。据我所知，.netcore 路由将请求发送到 index.csthml，然后从捆绑的 main-server.js 加载角度应用程序，然后用应用程序替换该
。所以基本上我不确定如何将 asp-prerender-module （这也是一个服务器端标签不是吗？）拉到 app.component.html 文件中？
我现在不太了解这个 asp-prerender-module。但如果它只是一个微调器或其他东西，而不是直接将它放在索引文件中。见编辑。