mat-spinner не отображается при загрузке углового app-root в index.html - PullRequest
Новая
       2

mat-spinner не отображается при загрузке углового app-root в index.html

0 голосов
/ 11 декабря 2018

Требование:

Я хочу показать <mat-spinner> при загрузке <app-root> в Angular

Код пробовал:

index.html: 

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

app.module.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>, пробовал только счетчик, а также с "Загрузка... "текст, как указано выше, но результат тот же - <mat-spinner> не отображается.

Я что-то здесь упускаю?

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Я использовал пользовательские 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>

В результате изображение бесконечно вращается

enter image description here

Я такжеВ каком-то проекте использовался чистый 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>
0 голосов
/ 17 января 2019

Хотя приложение изначально загружает под углом, еще не загрузило App module, поэтому оно не знает, что такое mat-spinner в этой точке.

Вам необходимо использовать что-то, что не является угловым, если выхочу показать что-нибудь до загрузки модулей.Ваш лучший выстрел будет gif-spinner

0 голосов
/ 11 декабря 2018

Используйте <mat-spinner></mat-spinner> в app.component.html (шаблон с именем селектора app-root).

Вы можете использовать условие ngIf для отображения счетчика в шаблоне, пока все необходимые элементы не готовы кбыть показано.Пример PFB

app.component.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>

app.component.ts 

constructor(){
    setTimeout(() => {
      this.isReady = true;
    }, 5000);
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...