堆棧內存溢出
  簡體   English   中英

在 index.html 中加載 angular app-root 時未顯示 mat-spinner

[英]mat-spinner is not showing while loading angular app-root in index.html

 原文  2018-12-11 06:39:05  1   4    node.js/ angular/ angular-material

問題描述

要求：

我想在Angular中加載<app-root>時顯示一個<mat-spinner>

代碼嘗試：

索引.html：

<body>
  <app-root>Loading ...
    <mat-spinner></mat-spinner>
  </app-root>
</body>

應用程序模塊.ts：

import {
   ...,
   MatProgressSpinnerModule,
   ... }from '@angular/material';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
    ...,
    MatProgressSpinnerModule,
    ...
  ],
  ...
})

版本信息：

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

結果：

它顯示Loading...但不顯示<mat-spinner> ，嘗試單獨使用 spinner 以及上面給出的“Loading...”文本，但結果相同 - <mat-spinner>不顯示。

我在這里錯過了什么嗎？

4 個解決方案

解決方案1
 4  2019-01-17 15:51:31

當應用程序最初加載時，angular 尚未加載App module ，因此它不知道此時的mat-spinner是什么。

如果您想在加載模塊之前顯示任何東西，則需要使用非角度的東西。 你最好的鏡頭是gif-spinner

解決方案2
 3 已采納  2018-12-11 07:38:58

我使用自定義 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>

結果是這個圖像無休止地旋轉

在此處輸入圖像描述

我還在一些項目中使用了純 css 微調器，它的工作原理如下： 

 <style>.center-page{ display: flex; width:calc(100vw - 40px); height:calc(100vh - 40px); align-items: center; text-align: center; }.sk-cube-grid { width: 40px; height: 40px; margin-left: auto; margin-right: auto; }.sk-cube-grid.sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }.sk-cube-grid.sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }.sk-cube-grid.sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }.sk-cube-grid.sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } </style>
 <div class="center-page"> <div class="sk-cube-grid"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div> </div>

解決方案3
 1  2020-04-10 11:45:30

正如其他人已經回答的那樣； 在您的應用程序加載之前，使用角度組件不起作用。 您可以采用復制標記和樣式的方法，在index.html的<app-root>中重現它，而不是使用與角度材料完全不同的微調器。

這是使用這種方法的要點的鏈接： https ://gist.github.com/DanRibbens/00dc9e971b0df9f58c3726885a2a59aa#file-index-html

解決方案4
 0  2018-12-11 07:29:27

在 app.component.html（具有選擇器名稱 app-root 的模板）中使用<mat-spinner></mat-spinner> 。

您可以使用ngIf條件在模板中顯示微調器，直到准備好顯示所有必需的內容。 PFB樣品

應用程序組件.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>

應用程序組件.ts

constructor(){
    setTimeout(() => {
      this.isReady = true;
    }, 5000);
  }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Angular 2&#39;app-root&#39;未在ExpressJS路由上加載 運行時未加載angular 2 app-root angular2快速入門僅顯示正在加載..而非index.html的內容 角度應用程序的不同index.html 重新加載角度應用后沒有index.html 為什么Angular 2不加載默認的app-root組件？ 如何將Heroku托管指向子目錄中的angular應用和index.html？ Gulp：Index.html 未加載樣式表 MeanJS-將Angular集成到index.html文件中 angular 索引。html 腳本顯示
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM