Question

当Aurelia导航到新路线时，我尝试向class元素添加html，这样我就可以在页面加载时对页面进行不同的设置。 / p>

我目前的解决方案是将该类添加到main元素中，因为这是我视图的一部分，因此它只是工作＆＃34;，就像这样：

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class App {
    constructor (router) {
        this.router = router;
    }
}

然后在我看来我只是这样做：

<main class="${router.isNavigating ? 'loading' : ''}">
    <router-view></router-view>
</main>

但是，正如我所提到的，我更愿意将loading类添加到html元素中（以便我可以为页面上的每个单独的decendant设置样式）。由于html元素不是我视图的一部分，我无法以同样的方式完成此操作，但只要document.documentElement.classList.add('loading')是router.isNavigating，我就需要propertyChanged真。

所以我的问题是;我怎么能做到这一点？我知道aurelia支持router.isNavigating方法，但我不确定它是如何工作的，如routerIsNavigatingChanged()，@computedFrom(router)这样的嵌套属性不起作用。我也尝试了data = numpy.recfromtxt('table.csv', delimiter=';', dtype=str)及其变体，但无法使其发挥作用。

Answer 1

另一个解决方案可能是使用BindingEngine，但我认为EventAggregator是一个更好的解决方案。我在这里发帖只是为了你的好奇心。

import {BindingEngine} from 'aurelia-binding';

export class App {

  static inject = [BindingEngine];

  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }

  configureRouter(config, router) {
      //...
      this.router = router;        
  }

  attached() {
    this.navigationSubs = this.bindingEngine
      .propertyObserver(this.router, 'isNavigating')
      .subscribe(this.isNavigationChanged);
  }

  detached() {
    this.navigationSubs.dispose();
  }

  isNavigationChanged(newValue, oldValue) {
    if (newValue) {
      document.documentElement.classList.add('loading');
    } else {
      document.documentElement.classList.remove('loading');
    }
  }

}

此外，我不确定设置class的{{1}}是否是个好主意。

Answer 2

好的，所以我最终使用EventAggregator来解决这个问题;

this.ea.subscribe('router:navigation:processing', event => {
    document.documentElement.classList.add('loading');
});

this.ea.subscribe('router:navigation:success', event => {
    document.documentElement.classList.remove('loading');
});

我不确定这是最好的解决方案，但似乎有效。仍然想知道是否可以执行@computedFrom('router.isNavigating')因为尝试抛出错误。

检测到router.isNavigating的更改

2 个答案: