Угловой: отображение полосы загрузки в компоненте при изменении маршрута

Question

Не уверен, каков наилучший подход для достижения этой цели.

У меня есть список товаров по этому адресу: 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

В модуле приложения:

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