Как добавить ngx-loading-bar в качестве предзагрузчика в проект Angular

Question

У меня есть проект, разработанный в Angular 6+, когда пользователь заходит на сайт, сначала он видит логотип и панель загрузки под ним. У меня проблема с переключением на ngx-loading-bar, вставленную в pace.js

. Сейчас я использую Pace (последний пример - линия фиксированной ширины) https://github.hubspot.com/pace/docs/welcome/, интегрированная в index.htmlкорневой проект.

Я хочу поставить ngx-loading-bar вместо темпа, чтобы сделать ту же работу. ngx-loading-bar уже реализован и работает при добавлении <ngx-loading-bar></ngx-loading-bar> в некоторые компоненты, но не в index.html. Я хочу разместить тот же стиль, что и на полосе загрузки ширины, как на примере ссылки ниже (4-й пример пули, похожий на темп) https://aitboudad.github.io/ngx-loading-bar/ так что на нагрузке пользователи видят полосу загрузки, как она загружается, а при нагрузке она продолжаетсяследующий компонент в качестве примера проекта ниже.

Вот пример проекта www.wowlectures.com/pitchdeck

Answer 1

Не уверен, почему вы хотите, чтобы он работал в index.html, сделайте это в app.component.

Вы можете создать службу загрузки. Простой способ заключается в следующем:

@Injectable({providedIn: 'root'})
export class LoadingService {
  private _loading = true;

  get isLoading() {
    return this._loading;
  }

  set isLoading(v: boolean) {
    this._loading = v;
  }
}

Затем в app.component.ts:

export class AppComponent {
  constructor(public loading: LoadingService) {}
}

И app.component.html:

<any-loading-component *ngIf="loading.isLoading"></any-loading-component>
<router-outlet></router-outlet>

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

Answer 2

<app-root>
          <ngx-loading-bar></ngx-loading-bar>
        </app-root>

эй, вы можете добавить это в свой index.html