Aurelia 在HttpClient请求上动态显示元素

我想为我的应用程序完成的每个获取显示一个加载程序，防止用户多次提交相同的请求。为此，我更改了HttpClient配置，以便在main.ts中的配置期间拦截请求和响应

---

如果是纯js，我会做一些类似document.body.appendChild的事情。。。但奥雷莉亚不让我这么做

有没有一种方法可以动态显示自定义视图，而无需更改路由或在执行请求的每个组件上插入新的加载视图

---

另外，如果你有更好的方法解决这个问题，我愿意接受建议。

这里有一个可能适合你的选项。在

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());
}

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 );
  }
...

然后，在

app.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());
}

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 );
  }
...

---

然后在

app.html

中使用数据绑定w/

if.bind=“displayLoader”

或

show.bind=“displayLoader”

，这里有一个可能适合您的选项。在

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());
}

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 );
  }
...

然后，在

app.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());
}

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 );
  }
...

---

然后在

app.html

中使用数据绑定w/

if.bind=“displayLoader”

或

show.bind=“displayLoader”

，我的意思是，Aurelia并没有阻止你使用

文档。appendChild

，它只是强烈阻止你使用它。是的，我觉得直接访问DOM很糟糕，我只是测试了一些选项，但是这个孩子在我的实现中有一个奇怪的行为。我坚持使用最佳实践，谢谢。我的意思是，Aurelia并没有阻止您使用

文档。appendChild

，它只是强烈地阻止您使用它。是的，我对直接访问DOM感到不好，我只是测试了一些选项，但appendChild在我的实现中有一个奇怪的行为。我坚持最佳实践，谢谢。很好的方法，很有魅力。谢谢。很好的方法，很有魅力。非常感谢。