nprogress配置在Aurelia装饰器中的位置？

Question

通过Aurelia Contact-Manager教程，我现在想更改渲染nprogress进度栏的HTML元素。

我通过向src/app.html添加一个id来更新了src/app.html ， 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>

..并且根据nprogress文档 ，我需要像这样调用.configure()方法。

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

但是这行代码在哪里呢？ 我假设在src/resources/elements/loading-indicator.js某个地方。

Answer 1

您的假设是正确的，只需修改resources/elements/loading-indicator.js ，在类中添加一个constructor()方法即可调用.configure()方法（第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();
    }
  }
});