ルータへの変更を検出しました.isNavigating

Question

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> 

しかし、私が述べたように（私はページ上のすべての単一の降順のスタイルを設定できるように）、私が代わりにhtml要素にloadingクラスを追加することを好むだろう。 htmlの要素はではないので、私の見解の一部であるではありません。同じ方法でこれを達成することはできませんが、代わりにの場合はrouter.isNavigatingがtrueです。

私の質問です。どうすればこれを達成できますか？私はaureliaがpropertyChangedメソッドをサポートしていることを知っていますが、router.isNavigating、のようなネストされたプロパティの場合、どのように動作するのか分かりません。私も@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がより良い解決策だと思います。私はちょうどあなたの好奇心のためにここにこれを掲示しています。良いアイデアですhtmlのclassを設定する場合

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'); 
    } 
    } 

} 

はまた、私はわかりません。