Не удается отобразить счетчик или загрузку... в Angular 6 при использовании * ngIf

#angular #angular-material

Вопрос:

У меня есть 4 кнопки, похожие на вкладки, когда я нажимаю на первую кнопку, я должен отобразить первый компонент, если нажать на вторую кнопку, то второй компонент вот так..

Теперь моя проблема в том, что при переключении / нажатии одной кнопки на другую компонентам требуется слишком много времени для рендеринга DOM, поэтому я хочу отобразить «Загрузка …..».

1. добавьте любой сторонний загрузчик. это будет работать

2. ваш компонент ожидает получения некоторых данных с сервера, после чего вы можете использовать npmjs.com/package/ng-http-loader

3. Не удается отобразить счетчик или загрузку, что вы имеете в виду? Они вообще не отображаются или что происходит? Также, если вы можете добавить некоторый код, это будет полезно.

4. вы должны использовать mat-счетчик для отображения загрузки, и использовать это в ngIf выглядит следующим образом: *ngIf=»data; else loading_template».

Ответ №1:

Если вы просто хотите показать загрузку …, измените index.html , чтобы это выглядело следующим образом:

 <app-root>
  Loading ...
</app-root>

Если вам нужен чистый загрузчик CSS, измените index.html , чтобы он выглядел следующим образом:

 <body>
   <app-root>
     <div class="loader">Loading ...</div>
   </app-root>
</body>

А теперь анимируйте .loader класс в соответствии с вашими предпочтениями. Вы можете поиграть с плунжером, который я создал здесь:http://next.plnkr.co/edit/Ox5uJGpDSkMYQ9Fp

Ответ №2:

Если у каждого компонента есть свой собственный маршрут, вы можете подписаться на маршрутизатор.

В app.component.ts

 import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

constructor(private router: Router) {
        this.router.events.subscribe((event: RouterEvent) => {
            this.navigationInterceptor(event)
        });
}

navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
            this.loading = true
        }
        if (event instanceof NavigationEnd) {
            this.loading = false
        }

        // Set loading state to false in both of the below events to hide the spinner in case a request fails
        if (event instanceof NavigationCancel) {
            this.loading = false
        }
        if (event instanceof NavigationError) {
            this.loading = false
        }
    }

В app.component.html

 <router-outlet></router-outlet>
<spinner-component [spinnerShow]="loading_data"></spinner-component>

Счетчик.component.ts

 import { Component, Input  } from '@angular/core';

@Component({
    selector: 'spinner-component',
  templateUrl: './spinner.component.html',
 styleUrls: ["./spinner.component.scss"]
})

export class SpinnerComponent {
    @Input() spinnerShow: boolean;
}

Spinner.component.html

 <div *ngIf="spinnerShow" class="sc-background"></div>
<div *ngIf="spinnerShow" [ngClass]="{'sc-default-spinner' : ref.children.length == 0 }"  class="logo sc-center">
<div #ref><ng-content></ng-content></div></div>

Счетчик.component.scss

 .sc-background{
 content : "";
 z-index: 1004;
 position: absolute;
 top:-10%;
 right:0;
 left:0;
 bottom: 0;
 background-color: rgba(255,255,255,0.8);
}
.logo {
    background: url("./../../../../assets/images/sprite/template.png") 0px 0px;
    width:30px;
}
.sc-center{
top: 50vh;
margin: auto;
position: fixed;
left: 0;
right: 0;
z-index: 1005;

}