Как показать загрузку компонента во время отложенной загрузки - PullRequest
Новая
       25

Как показать загрузку компонента во время отложенной загрузки

2 голосов
/ 21 мая 2019

Я сделал ленивую загрузку конфига в своем угловом проекте.Это сделано, но есть проблема.

из-за того, что мой ленивый компонент загрузки слишком велик (700 КБ), время загрузки компонента с веб-сервера слишком велико (0,5 с)

Iдолжен показывать загрузочный компонент при отложенной загрузке.

Но я не могу найти вариант загрузки в модуле углового маршрутизатора.

Я пытаюсь найти определение типа углового маршрутизатора о отложенной загрузке. 

const routes: Routes = [
  { path: '', component: RandingPageComponent },
  {
    path: 'teams/:name',
    // Loading component cannot here
    loadChildren: 'src/app/domain/domain.module#DomainModule'
  },

  { path: '**', component: NotfoundComponent }
];

Ответы [ 2 ]

2 голосов
/ 21 мая 2019

попробуйте это (app.component.ts) 

import { Component } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event, NavigationCancel, 
NavigationError } from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  public showLoadingIndicator: boolean = true;
  constructor(private _router: Router) {
    this._router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {
        this.showLoadingIndicator = true;
      }

      if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.showLoadingIndicator = false;
      }
    });
  }
}

в html (app.component.ts) 

<div *ngIf="showLoadingIndicator" class="loading">Loading&#8230;</div>
<router-outlet></router-outlet>
2 голосов
/ 21 мая 2019

Метод Router.navigate возвращает обещание. Таким образом, вы можете позвонить тогда () по этому вопросу. Поэтому вы можете сохранить переменную с именем showLoadingComponent , которая по умолчанию false , а при навигации выполните следующее: 

this.showLoadingComponent = true;
this.router.navigate(['/newComponent']).then(value => {
      this.showLoadingComponent = false;
});

В вашем html, 

<div *ngIf="!showLoadingComponent">
    // default content
</div>
<appLoadingComponent *ngIf="showLoadingComponent"></appLoadingComponent>

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

...