Detect change to router.isNavigating

Question

Ich versuche eine class zu dem html Element hinzuzufügen, wenn Aurelia zu einer neuen Route navigiert, so dass ich die Seite anders stylen kann, wenn es geladen wird.

Meine aktuelle Lösung ist, die Klasse zu dem main Element hinzuzufügen, weil das ein Teil meiner Ansicht ist und so ist es „einfach funktioniert“, wie folgt aus:

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

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

Und dann in meiner Ansicht, die ich einfach tun:

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

Aber, wie ich schon erwähnt, würde ich es vorziehen, die loading Klasse das html Element anstelle hinzuzufügen (so dass ich jeden einzelnen decendant auf der Seite Stil kann). Da das html Element ist nicht Teil meiner Ansicht kann ich dies nicht auf die gleiche Weise erreichen, aber stattdessen muss ich document.documentElement.classList.add('loading') wann immer router.isNavigating ist wahr.

Also meine Frage ist; Wie kann ich das erreichen? Ich weiß, Aurelia unterstützt propertyChanged Methoden, aber ich bin mir nicht sicher, wie es funktioniert, wenn es eine verschachtelte Eigenschaft wie router.isNavigating, routerIsNavigatingChanged() nicht funktioniert. Ich habe auch @computedFrom(router) und Varianten davon versucht, aber kann es nicht zum Funktionieren bringen.

Answer 1

Ok, also endete ich mit dem EventAggregator stattdessen lösen;

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

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

Ich bin mir nicht sicher, es ist die beste Lösung, aber es scheint zu funktionieren. Würde immer noch gerne wissen, ob es möglich ist, @computedFrom('router.isNavigating') zu tun, weil das versucht, Fehler zu werfen.

Answer 2

Eine andere Lösung könnte die BindingEngine sein, aber ich denke, dass EventAggregator eine bessere Lösung ist. Ich poste dies hier nur für Ihre Neugier.

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

} 

Außerdem bin ich nicht sicher, ob class der html Einstellung ist eine gute Idee.