檢測對router.is的改變

Question

當Aurelia正在導航到新路由時，我試圖將class添加到html元素，以便我可以在加載時以不同的樣式對頁面進行樣式設置。

我目前的解決方案是將類添加到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元素，而不是（這樣我可以風格在頁面上每一個decendant）。由於html元素是而不是我的觀點的一部分，我不能以相同的方式完成這一點，但相反，我需要document.documentElement.classList.add('loading')每當router.isNavigating爲真。

所以我的問題是，我怎麼能做到這一點？我知道aurelia支持propertyChanged方法，但我不確定它是如何工作的，當它是嵌套的屬性，如router.isNavigating,routerIsNavigatingChanged()不起作用。我也嘗試過@computedFrom(router)及其變種，但無法使其發揮作用。

Answer 1

好吧，所以我最終用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')，因爲嘗試引發錯誤。

Answer 2

另一種解決方案可能是使用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是不錯的主意。