如何将 ngx-loading-bar 作为预加载器添加到 Angular 项目中

Question

我有一个用 Angular 6+ 开发的项目，当用户访问网站时，他首先会看到网站下方的徽标和加载栏。我在切换到 pace.js

的 ngx-loading-bar 时遇到问题

现在我正在使用 Pace（最后一个示例是固定宽度的线） https://github.hubspot.com/pace/docs/welcome/ 集成到根项目的 index.html 中。

我想用 ngx-loading-bar 而不是 pace 来做同样的工作。当在某些组件中添加 <ngx-loading-bar></ngx-loading-bar> 而不是在 index.html 中时，ngx-loading-bar 已经实现并且可以工作。我想在下面的示例 link 中放置相同样式的相同宽度的加载栏（第 4 个项目符号示例，类似于速度） https://aitboudad.github.io/ngx-loading-bar/ 所以在加载时，用户会看到加载栏是如何加载和加载的，它会在下面的项目示例中进入下一个组件。

这里是项目的例子 www.wowlectures.com/pitchdeck

Answer 1

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

嘿，你可以在你的 index.html

中添加这个

Answer 2

不确定为什么要在 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>

更简洁的方法是在服务中使用 subjects/observables 并订阅要显示加载栏的更改，并从您希望它开始加载的任何地方发送。

如何将 ngx-loading-bar 作为预加载器添加到 Angular 项目中

How to add ngx-loading-bar as preloader into Angular project

javascript

loading

preloader

typescript

angular