Обнаруживать изменение на router.isNavigating

Question

Я пытаюсь добавить class в элемент html, когда Aurelia переходит на новый маршрут, чтобы я мог стилизовать страницу по-разному при ее загрузке.

Мое текущее решение, чтобы добавить класс к 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 элементу вместо этого (так что я могу укладывать каждый на-потомок странице). Поскольку элемент 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'); 
    } 
    } 

} 

Кроме того, я не уверен, что если установка class из html является хорошей идеей.