角度：更改路线时在组件中显示加载条

Question

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

我在此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。它将等到接收到数据后再呈现所有组件（菜单，信息，当然还有项目的详细信息）。

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

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