라우터로 변경 감지 .isNavigating

Question

Aurelia가 새로운 경로를 탐색 할 때 html 요소에 class을 추가하여로드 할 때 다르게 페이지 스타일을 지정할 수 있습니다.

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

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

그리고 내보기에 단순히 수행하십시오 :

내 현재 솔루션은 내보기의 일부이고 그래서 "단지 작품"때문에이처럼 main 요소에 클래스를 추가하는 것입니다

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

하지만, 내가 언급처럼, 나는 (I 페이지에있는 모든 단일 decendant 스타일을 할 수 있도록) 대신 html 요소에 loading 클래스를 추가하는 것을 선호합니다. html 요소가 이 아니기 때문에이 아니기 때문에 동일한 방식으로이 작업을 수행 할 수는 없지만 대신 이 필요할 때마다 router.isNavigating이 true 일 때마다 필요합니다.

제 질문은; 내가 어떻게이 일을 할 수 있니? 나는 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가 더 나은 솔루션이라고 생각합니다. 호기심을 위해서 여기에 게시하고 있습니다. 좋은 생각입니다 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'); 
    } 
    } 

} 

는 또한, 잘 모르겠어요.