Aurelia 检测对router.isNavigating的更改

当Aurelia导航到新路径时，我尝试向

html

元素添加

class

，以便在加载页面时可以对其进行不同的样式设置

我当前的解决方案是将类添加到

main

元素中，因为这是我视图的一部分，所以它“只起作用”，如下所示：

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

元素中（这样我就可以为页面上的每个decentant设置样式）。由于

html

元素不是我视图的一部分，因此我无法以相同的方式完成此操作，而是需要

document.documentElement.classList.add（'loading'）

，只要

router.isNavigating

为真

---

所以我的问题是,；我怎样才能做到这一点？我知道aurelia支持

propertyChanged

方法，但我不确定当它是一个嵌套属性（如

router.isNavigating

）时它是如何工作的，

routerIsNavigatingChanged（）

不起作用。我也尝试了

@computedFrom（router）

及其变体，但无法使其工作。

好的，所以我最终使用

事件聚合器解决了这个问题

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'）
，因为这样做会引发错误。
另一个解决方案可能是使用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');
    }
  }

}

此外，我不确定设置
html
的
class
是否是个好主意。
Fabio上面的回答相当于执行
@computedFrom（'router.isNavigating'）
，但我认为使用EventAggregator的解决方案是正确的。我同意@AshleyGrant.伙计们，让我问一下。。使用“isNavigating”显示/隐藏微调器（假设我在附加事件中有api调用）。。即使我的调用尚未结束，微调器也将隐藏？如何取消订阅事件聚合器？存储subscribe方法的返回值，然后在其上调用dispose（）。感谢您的帮助，这有助于将来的参考。但是如果你们都认为EA是一条出路，我想我会给自己一个答案。我错过了你们关于添加HTML类的评论。当涉及到全球风格的国家时，我喜欢这样做。比如弹出窗口打开了，或者页面正在加载，等等。在
上设置一个类不仅可以为每个子元素设置根元素的样式。当涉及到
html.loading
时，我所做的就是显示一个微调器。相反，将类添加到实际微调器会限制我的样式选择，并将app.js与微调器HTML紧密结合，因此我更喜欢
HTML.loading
方法。我明白了。好吧，我想在
中添加
加载
，但这只是我的观点。如果它解决了你的问题并且你喜欢它，那么就去做：D