在Aurelia装饰器中，nprogress配置到哪里？

Question

在使用了Aurelia联系人-经理教程之后，我现在想更改nprogress进度条所针对的元素。

我通过向src/app.html添加一个id来更新div.container，如下所示：

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <nav> ... </nav>

  <loading-indicator loading.bind="router.isNavigating || api.isRequseting"></loading-indicator>

  <div id="main" class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

。。根据国家进展文件，我需要像这样调用.configure()方法。

NProgress.configure({ parent: '#main' });

，但是这一行代码会去哪里呢？，我想在src/resources/elements/loading-indicator.js的某个地方。

Answer 1

您的假设是正确的，只需修改resources/elements/loading-indicator.js，在可以调用.configure()方法的类中添加一个constructor()方法(第8行)。

import * as nprogress from 'nprogress';
import {bindable, noView, decorators} from 'aurelia-framework';

export let LoadingIndicator = decorators(
  noView(['nprogress/nprogress.css']),
  bindable({name: 'loading', defaultValue: false})
).on(class {
  constructor() {
    nprogress.configure({ parent: '#main' });
  }
  loadingChanged(newValue) {
    if (newValue) {
      nprogress.start();
    } else {
      nprogress.done();
    }
  }
});