it-swarm.com.ru

Показать экран загрузки при навигации между маршрутами в Angular 2

Как показать экран загрузки при изменении маршрута в Angular 2?

107

Текущий угловой маршрутизатор обеспечивает навигационные события. Вы можете подписаться на них и внести соответствующие изменения в пользовательский интерфейс. Не забудьте учитывать в других событиях, таких как NavigationCancel и NavigationError, чтобы остановить спиннер в случае сбоя при переходе через маршрутизатор.

app.component.ts - ваш корневой компонент

...
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'

@Component({})
export class AppComponent {

  // Sets initial value to true to show loading spinner on first load
  loading = true

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

  // Shows and hides the loading spinner during RouterEvent changes
  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 - ваш корневой вид

<div class="loading-overlay" *ngIf="loading">
    <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
    <md-progress-bar mode="indeterminate"></md-progress-bar>
</div>

Ответ с улучшенной производительностью : Если вы заботитесь о производительности, есть лучший метод, который будет несколько утомительнее, но улучшение производительности будет стоить дополнительной работы. Вместо того, чтобы использовать *ngIf для условного отображения счетчика, мы могли бы использовать NgZone и Renderer из Angular для включения/выключения счетчика, который будет обходить обнаружение изменений Angular при изменении состояния счетчика. Я нашел это, чтобы сделать анимацию более плавной по сравнению с использованием *ngIf или async pipe.

Это похоже на мой предыдущий ответ с некоторыми изменениями:

app.component.ts - ваш корневой компонент

...
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router'
import {NgZone, Renderer, ElementRef, ViewChild} from '@angular/core'


@Component({})
export class AppComponent {

  // Instead of holding a boolean value for whether the spinner
  // should show or not, we store a reference to the spinner element,
  // see template snippet below this script
  @ViewChild('spinnerElement')
  spinnerElement: ElementRef

  constructor(private router: Router,
              private ngZone: NgZone,
              private renderer: Renderer) {
    router.events.subscribe((event: RouterEvent) => {
      this._navigationInterceptor(event)
    })
  }

  // Shows and hides the loading spinner during RouterEvent changes
  private _navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      // We wanna run this function outside of Angular's zone to
      // bypass change detection
      this.ngZone.runOutsideAngular(() => {
        // For simplicity we are going to turn opacity on / off
        // you could add/remove a class for more advanced styling
        // and enter/leave animation of the spinner
        this.renderer.setElementStyle(
          this.spinnerElement.nativeElement,
          'opacity',
          '1'
        )
      })
    }
    if (event instanceof NavigationEnd) {
      this._hideSpinner()
    }
    // 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._hideSpinner()
    }
    if (event instanceof NavigationError) {
      this._hideSpinner()
    }
  }

  private _hideSpinner(): void {
    // We wanna run this function outside of Angular's zone to
    // bypass change detection,
    this.ngZone.runOutsideAngular(() => {
      // For simplicity we are going to turn opacity on / off
      // you could add/remove a class for more advanced styling
      // and enter/leave animation of the spinner
      this.renderer.setElementStyle(
        this.spinnerElement.nativeElement,
        'opacity',
        '0'
      )
    })
  }
}

app.component.html - ваш корневой вид

<div class="loading-overlay" #spinnerElement style="opacity: 0;">
    <!-- md-spinner is short for <md-progress-circle mode="indeterminate"></md-progress-circle> -->
    <md-spinner></md-spinner>
</div>
166
borislemke

UPDATE: 3 Теперь, когда я обновился до нового маршрутизатора, подход @borislemke не будет работать, если вы используете CanDeactivate guard. Я унижаю свой старый метод, ie: этот ответ

UPDATE2: события маршрутизатора в new-router выглядят многообещающе и ответ by @borislemke, по-видимому, охватывает основной аспект реализации счетчика, я не проверял его, но рекомендую.

UPDATE1: Я написал этот ответ в эпоху Old-Router, когда раньше было только одно событие route-changed, уведомленное через router.subscribe(). Я также почувствовал перегрузку нижеприведенного подхода и попытался сделать это, используя только router.subscribe(), и он backfired, потому что не было способа обнаружить canceled navigation. Поэтому мне пришлось вернуться к длительному подходу (двойная работа).


Если вы знаете свой путь в Angular2, это то, что вам нужно


Boot.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {MyApp} from 'path/to/MyApp-Component';
import { SpinnerService} from 'path/to/spinner-service';

bootstrap(MyApp, [SpinnerService]);

Root Component- (MyApp)

import { Component } from '@angular/core';
import { SpinnerComponent} from 'path/to/spinner-component';
@Component({
  selector: 'my-app',
  directives: [SpinnerComponent],
  template: `
     <spinner-component></spinner-component>
     <router-outlet></router-outlet>
   `
})
export class MyApp { }

Spinner-Component (подпишется на Spinner-service, чтобы соответственно изменить значение active)

import {Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
  selector: 'spinner-component',
  'template': '<div *ngIf="active" class="spinner loading"></div>'
})
export class SpinnerComponent {
  public active: boolean;

  public constructor(spinner: SpinnerService) {
    spinner.status.subscribe((status: boolean) => {
      this.active = status;
    });
  }
}

Spinner-Service (загрузите этот сервис)

Определите наблюдаемое, которое будет подписано спиннер-компонентом, чтобы изменить статус при изменении, и функцию, чтобы узнать и установить спиннер активным/неактивным.

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/share';

@Injectable()
export class SpinnerService {
  public status: Subject<boolean> = new Subject();
  private _active: boolean = false;

  public get active(): boolean {
    return this._active;
  }

  public set active(v: boolean) {
    this._active = v;
    this.status.next(v);
  }

  public start(): void {
    this.active = true;
  }

  public stop(): void {
    this.active = false;
  }
}

Все остальные компоненты маршрута 

(образец):

import { Component} from '@angular/core';
import { SpinnerService} from 'path/to/spinner-service';
@Component({
   template: `<div *ngIf="!spinner.active" id="container">Nothing is Loading Now</div>`
})
export class SampleComponent {

  constructor(public spinner: SpinnerService){} 

  ngOnInit(){
    this.spinner.stop(); // or do it on some other event eg: when xmlhttp request completes loading data for the component
  }

  ngOnDestroy(){
    this.spinner.start();
  }
}
38
Ankit Singh

Почему бы просто не использовать простой CSS: 

<router-outlet></router-outlet>
<div class="loading"></div>

И в ваших стилях: 

div.loading{
    height: 100px;
    background-color: red;
    display: none;
}
router-outlet + div.loading{
    display: block;
}

Или даже мы можем сделать это для первого ответа: 

<router-outlet></router-outlet>
<spinner-component></spinner-component>

А потом просто 

spinner-component{
   display:none;
}
router-outlet + spinner-component{
    display: block;
}

Суть в том, что новые маршруты и компоненты всегда будут появляться после router-outlet , поэтому с помощью простого селектора css мы можем показать и скрыть загрузку.

10
Milad

Если у вас есть специальная логика, необходимая только для first маршрута, вы можете сделать следующее:

AppComponent

    loaded = false;

    constructor(private router: Router....) {
       router.events.pipe(filter(e => e instanceof NavigationEnd), take(1))
                    .subscribe((e) => {
                       this.loaded = true;
                       alert('loaded - this fires only once');
                   });

Мне нужно было скрыть нижний колонтитул, который в противном случае появлялся вверху страницы. Также, если вам нужен только загрузчик для первой страницы, вы можете использовать это.

1
Simon_Weaver

Вы также можете использовать это существующее решение . Демо здесь . Это похоже на панель загрузки YouTube. Я просто нашел его и добавил в свой собственный проект.

0
walkerbox