Обнаружить изменение в 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 правда.

Итак, мой вопрос: как я могу это сделать? Я знаю аурелия поддерживает 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 хорошая идея