각도 2 라우터 - 서비스에서 정적 경로 데이터를 가져올 수 없습니다.

Question

각도/라우터 3.0.0-rc-2를 사용하여 작성한 서비스의 경로에 정의 된 데이터를 검색하는 데 실패했습니다.

그러나 ActivatedRoute를 삽입하여 해당 경로에 정의 된 구성 요소 내에서 데이터를 검색 할 수 있습니다. 여기

내 경로입니다 : 여기

export const CommonRoutes:RouterConfig = <Route[]>[ 
    { 
     path: '', 
     component: Home, 
     data: { 
      someKey: true 
     } 
    } 
]; 

작동 구현하지만, 나는이 논리 처리 할 수 ​​있도록 서비스를 필요로하기 때문에이 작업을 수행 할 방법이 아니다 :

import {ActivatedRoute} from '@angular/router'; 

@Component({ 
    //component config... 
}); 

export class Home { 

    constructor(private _route: ActivatedRoute) { 
     this._route.data.subscribe(data => { 
      console.log(data); 
     }) 
    } 
} 

을 예상 할 수 있듯이이로드 될 때

, 홈 구성 요소는, 밖으로 뱉어 :

{ 
    someKey: true 
} 

을하지만, 승 이 논리를 주 앱 구성 요소에 삽입 된 서비스로 이동하면 빈 객체가 기록됩니다.

나는 동일한 차이를 산출하는 라우터 내비게이션 이벤트에도 가입을 시도했다.

이것이 더 패러다임 문제인지 궁금합니다. ActivatedRoute 설명서 구성 요소 설명은 다음과 같습니다 : Contains the information about a component loaded in an outlet. The information is provided through the params, urlSegments, and data observables. - 이로 인해 라우트에 링크 된 구성 요소에 대한 라우트 정보 만 사용할 수 있다고 생각하게 만듭니다.

그래서 나는 라우터를 직접 통과하고 Router.routerState를 사용하는 다른 접근법을 시도했습니다. 다음은 (I 일이이 논리를 필요로하는 곳에 임) 서비스 클래스 코드 :

//...truncate imports/injectable decorator.... 

constructor(private _router:Router) { 
    this._router.events 
     .filter(evt => evt instanceof NavigationEnd) 
     .subscribe(data => { 
      console.log(_router.routerState.snapshot.root.data); 
     }); 
} 

이 겉으로는 예기치 않게 로그, 콘솔에 빈 개체.

라우터 작동 방식에 대한 근본적인 오해가 있습니까? 라우터가 현재 경로에서 정적으로 정의 된 데이터에 대해 구성 요소가 할 수 있어야하는 것이어야한다고 생각합니다. 하지만 어쩌면 나는 열매가 아니다. 그러나 모든 단일 구성 요소에 존재하거나 존재하지 않을 수있는 구성 변수에 의존하는 글로벌 논리는 서비스에서이를 수행해야합니다.

내 일부는 실제 상황이 항상 같은 것을 지시하지 않는다는 사실을 고려하지 않고 각도 1의 결함 인 것처럼 느껴진다. 아키텍처 ...

관련성이 있지만 webpack을 통해이 프로젝트를 실행 중인지 확실하지 않습니다.

도움을 주시면 감사하겠습니다.

Answer 1

나는이 사람이 여기에 working example answer을 주었다고 믿습니다.

정적 데이터가 보이지 않고 묻혀있는 것처럼 보이지만 존재합니다.

constructor(private _router:Router) { 
    this._router.events 
     .filter(evt => evt instanceof NavigationEnd) 
     .subscribe(data => { 
      console.log(_router.routerState.root.firstChild.snapshot.data); 
     }); 
} 

로컬 시도하고 나를 위해 일한 : 귀하의 경우에는, 그합니다 (firstChild 속성을 확인할 수) 일 것이다.