Angular：更改路线时在组件中显示加载栏答案

【问题标题】：Angular: Showing loading bar in a component when changing routeAngular：更改路线时在组件中显示加载栏
【发布时间】：2019-07-31 02:20:35
【问题描述】：

不确定实现这一目标的最佳方法是什么。

我在这个 URL 上有一个项目列表：http://localhost/items

当用户点击编辑按钮（比如说第 2 项按钮）时，它会将路由更改为http://localhost/items/item2

现在我想从数据库中获取所选项目的信息并显示详细信息。在等待来自服务器的数据时，我想显示放置项目列表的加载进度，同时显示菜单和信息组件。像这样：

我曾经这样做的一种方法是简单地加载 ItemDetails 组件，显示加载标签，请求获取详细信息，当收到数据时，我隐藏加载标签。

  ngOnInit() {
    this.loading = true;
    const itemID = this.route.snapshot.paramMap.get('id');
    this.itemsService
        .getItem(itemID)
        .subscribe(restult => {
            //process result
            this.loading = false;
        });
  }

这种方法效果很好，但我不确定这是否是反模式。

我尝试的第二种方法是使用解析器获取项目信息并依靠路由器事件（NavigationStart、NavigationEnd）来显示加载标签。

这种方法的问题是当用户在浏览器中输入项目详细信息 URL 时（不单击编辑按钮）：http://localhost/items/item2。它会等到接收到数据后才会呈现所有组件（菜单、信息，当然还有项目详细信息）。

那么，可以使用第一种方法还是反模式？如果它是一种反模式，那么使用解析器或任何其他方法以我能够在检索数据时显示某些组件（菜单、加载栏）的方式来解决此问题的最佳方法是什么？

【问题讨论】：

我认为你的方法很好。您使用的是 SSR（服务器端渲染）还是客户端渲染？为什么我要问这个，因为如果您在首次启动时控制浏览器或页面加载事件，您可以触发 loading = true 以便控制您的 URL 是浏览器输入。

标签： angular angular-router

【解决方案1】：

你也可以使用npm包，所以你不需要为每个请求设置加载标志这里是npm包示例。

包裹：https://www.npmjs.com/package/ng-http-loader

$ npm install ng-http-loader --save / yarn add ng-http-loader

在 AppModule 中：

`import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { NgHttpLoaderModule } from 'ng-http-loader';

 @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule, // <============ (Perform HTTP requests with this module)
        NgHttpLoaderModule.forRoot(), // <============ Don't forget to call 'forRoot()'!
    ],
    providers: [],
        bootstrap: [AppComponent]
})
export class AppModule { }`

在 app.component.html 中

<ng-http-loader></ng-http-loader>

【讨论】：