Невозможно показать счетчик в Angular при запросе маршрутизации - PullRequest
Новая
       32

Невозможно показать счетчик в Angular при запросе маршрутизации

0 голосов
/ 20 сентября 2018

Я пытаюсь настроить счетчик для отображения запросов в angular 5. До сих пор я использовал учебник, найденный здесь:

https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/

Кажетсяочень прямо вперед;установите логическое значение для оценки либо true, либо false в зависимости от события.Единственное изменение, которое мне действительно нужно было сделать для моего кода, было ngx-spinner в html вместо mat-progress-bar.Тем не менее, до сих пор я не смог заставить показывать счетчик.

Вот код для справки, хотя он в значительной степени идентичен ссылке: 

import {Component} from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    loading = false;

    constructor(private router: Router, private spinner: NgxSpinnerService) {
        this.router.events.subscribe((event: Event) => {
            console.log('Event Occured');
            switch (true) {
                case event instanceof NavigationStart: {
                    this.loading = true;
                    console.log(this.loading);
                    break;
                }
                case event instanceof NavigationEnd:
                case event instanceof NavigationError:
                case event instanceof NavigationCancel: {
                    this.loading = false;
                    console.log(this.loading);
                    break;
                }
                default: {
                    break;
                }
            }
        });
    }

    /*ngOnInit() {
        /!** spinner starts on init *!/
        this.spinner.show();

        setTimeout(() => {
            /!** spinner ends after 5 seconds *!/
            this.spinner.hide();
        }, 5000);
    }
*/

}

А здесьэто app.component.html: 

<ngx-spinner [hidden]="loading==false"
             bdColor = "rgba(51, 51, 51, 0.8)"
             size = "default"
             color = "#ffee00"
             type = "pacman"
>
<app-nav></app-nav>
<router-outlet [hidden]="loading==true">
</router-outlet>

Мне бы хотелось, чтобы счетчик показывал, пока loading верно, а router-outlet и содержимое, которое он предоставляет, скрывать,Если значение loading ложно, счетчик будет скрыт, и будет отображаться содержимое.

До сих пор я мог только показать счетчик, когда я закомментировал все случаи, кроме NavigationStart, предотвращая изменение loading на false.Кроме того, я смог увидеть содержимое, возвращаемое маршрутизатором-розеткой за спиннером, несмотря на скрытый тег на нем.Я смог спрятать его, поместив в div: 

<div [hidden]="loading==true">
    <app-nav></app-nav>
    <router-outlet>
    </router-outlet>
</div>

Но это все еще не решает тот факт, что когда я позволяю loading вычислять значение false, я никогда не вижу счетчикна первом месте;он мгновенно загружает компоненты, возвращаемые через роутер-розетку.Я новичок в угловой, так что это заставляет меня взбираться на стену.Это просто случай загрузки для меня, чтобы увидеть счетчик, или что-то еще в игре?

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Попытайтесь установить здесь тайм-аут, чтобы заставить спиннер показывать 

case event instanceof NavigationCancel: {
  console.log(this.loading);
  // force to wait 2 seconds to see the spinner.
  setTimeout(() => {
    this.loading = false;
  }, 2000);
  break;
}

Как упоминал Кароль, это происходит слишком быстро, чтобы иначе увидеть спиннер.Что нормально, вы не ждете чего-то от удаленного сервера.Все это происходит довольно быстро на местном уровне.

0 голосов
/ 20 сентября 2018

Вы не можете видеть прядильщик, потому что он прячется очень быстро.Прикрепите резольвер к маршрутизации, чтобы увидеть счетчик в действии.Ваш счетчик, вероятно, виден в течение примерно 100 мс.

...