Ladebildschirm beim Navigieren zwischen Routen in Angular 2 anzeigen

Wie zeige ich einen Ladebildschirm, wenn ich eine route im Winkel 2?

InformationsquelleAutor der Frage think123 | 2016-05-06

148

Den aktuellen Winkel-Router stellt Navigation-Events. Sie können Sie abonnieren und machen änderungen an der Benutzeroberfläche entsprechend. Denken Sie daran, zu zählen, in anderen Veranstaltungen, wie NavigationCancel und NavigationError zu stoppen, Ihr spinner im Fall router-übergänge scheitern.

app.Komponente.ts - Ihre Stamm-Komponente

...
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 - Ihre Stamm-anzeigen

<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>

Leistung Verbesserte Antwort: Wenn Sie sich sorgen über die Leistung gibt es eine bessere Methode, es ist etwas mühsam, Sie zu implementieren, sondern die Verbesserung der Leistung Wert sein wird, die zusätzliche Arbeit. Anstelle der Verwendung von *ngIf bedingt zeigen die spinner, die wir nutzen könnten Eckig ist NgZone und Renderer an - /ausschalten der spinner, die bypass-Winkel-change-Erkennung, wenn wir ändern die spinner Zustand. Ich fand dieses, um die animation glatter im Vergleich zu *ngIf oder eine async Rohr.

Dies ist ähnlich wie meine Vorherige Antwort mit einigen tweaks:

app.Komponente.ts - Ihre Stamm-Komponente

...
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 - Ihre Stamm-anzeigen

<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>

InformationsquelleAutor der Antwort borislemke

UPDATE:3 Nun, ich habe ein Upgrade auf neuen Router, @borislemke's Ansatz wird nicht funktionieren, wenn Sie CanDeactivate guard. Ich bin erniedrigend zu meiner alten Methode, ie: diese Antwort

UPDATE2: Router-events in new-router vielversprechend und die Antwort von @borislemke scheint zu decken, ist der wichtigste Aspekt der spinner Umsetzung, habe ich nicht nicht getestet, aber ich kann es nur empfehlen.

UPDATE1: ich schrieb diese Antwort in der ära der Old-Routerwenn es verwendet werden, um nur ein Ereignis route-changed informiert über router.subscribe(). Außerdem fühlte ich mich überladen von unten nähern und versuchte es mit nur router.subscribe()und es ging nach hinten Los,weil es keine Möglichkeit gab, zu erkennen canceled navigation. Also musste ich wieder zu langen Ansatz(doppelte Arbeit).

Wenn Sie wissen, Ihren Weg in Angular2, das ist, was Sie brauchen

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-Komponente- (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-Komponente (abonnieren Spinner-Dienst ändern Sie den Wert der aktiven entsprechend)

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 (bootstrap diesen service)

Definieren eine beobachtbare abonniert haben, durch die spinner-Komponente, um den status zu ändern auf ändern, und Funktion zu kennen und setzen die spinner aktiv/inaktiv.

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;
  }
}

Alle Anderen Wege Komponenten

(Beispiel):

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();
  }
}

InformationsquelleAutor der Antwort Ankit Singh

Warum nicht einfach mit einfachen css :

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

Und in Ihrem Stile :

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

Oder auch wir können dies tun, für die erste Antwort:

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

Und dann einfach nur

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

Der trick hier ist, die neuen Routen und Komponenten wird immer angezeigt, nachdem router-Steckdose , also mit einem einfachen css-Selektor können wir ein-und ausblenden der laden.

InformationsquelleAutor der Antwort Milad

0

Könnten Sie auch diese vorhandene Lösung. Die demo hier. Es sieht aus wie youtube Ladebalken. Ich fand es einfach und fügte hinzu, es zu meinem eigenen Projekt.

InformationsquelleAutor der Antwort walkerbox

Wenn Sie spezielle Logik, die erforderlich für die ersten route können Sie Folgendes tun:

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');
                   });

Hatte ich eine Notwendigkeit für diese zu verstecken meine Fußzeile, sonst erscheinen am oberen Rand der Seite. Auch wenn Sie nur ein loader für die erste Seite, die Sie verwenden können.

InformationsquelleAutor der Antwort Simon_Weaver

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.