Элемент отображения динамически на запросах HttpClient

Question

Я хочу отображать загрузчик для каждой выборки, выполненной моим приложением, не позволяя пользователю отправлять один и тот же запрос несколько раз. Для этого я изменил конфигурацию HttpClient для перехвата запросов и ответов во время конфигурации в main.ts

---

let httpClient = new HttpClient(); 

    httpClient.configure(config => { 
     config.withInterceptor({ 
      request(request) { 
       // displayLoader(); 
       return request; 
      }, 
      response(response) { 
       // hideLoader(); 
       return response; 
      }, 
     }); 
    });​ 

Если бы это была равнина JS я бы сделать что-то вроде document.body.appendChild ... но Аурелия doens Позвольте мне это сделать.

Есть ли способ отображения пользовательского представления динамически, без изменения маршрута или необходимости вставить новое загрузочное представление для каждого компонента, который выполняет запрос?

Также, если у вас есть лучший подход к этой проблеме, я открыт для предложений.

Answer 1

Вот вариант, который может сработать для вас. В вашем main.js, есть что-то, что выглядит следующим образом:

import {HttpClient} from 'aurelia-fetch-client'; 
import {EventAggregator} from 'aurelia-event-aggregator'; 

export function configure(aurelia) { 
    const container = aurelia.container; 

    const httpClient = container.get(HttpClient); 
    const ea = container.get(EventAggregator); 

    httpClient.configure(config => { 
    config.withInterceptor({ 
     request(request) { 
     ea.publish('http-request', request); 
     return request; 
     }, 
     response(response) { 
     ea.publish('http-response', response); 
     return response; 
     } 
    }); 
    }); 

    aurelia.use 
    .standardConfiguration() 
    .developmentLogging() 
    .singleton(HttpClient, httpClient); 


    aurelia.start().then(() => aurelia.setRoot()); 
} 

Затем в app.js или что вы используете для корневой страницы вашего приложения. Есть что-то вроде этого:

import {inject} from 'aurelia-framework'; 
import {EventAggregator} from 'aurelia-event-aggregator'; 

@inject(EventAggregator) 
export class App { 
    displayLoader = false; 
    constructor(ea) { 
    this.ea = ea; 

    ea.subscribe('http-request',() => this.displayLoader = true); 
    ea.subscribe('http-response',() => this.displayLoader = false); 
    } 
... 

Тогда просто использовать привязку данных ж/if.bind="displayLoader" или в app.html.