Angular2 라우터 - 아웃렛 구성 요소 이벤트 발생 (A2> = v1.2.0)

Question

라우트 된 구성 요소에서 이벤트를 받고 부모 구성 요소로부터 데이터를 전달하고 싶습니다.

콘텐츠 앱 템플릿 :

<router-outlet [data]='data' (selected)="selected($event)"></router-outlet> //this is not working 

A '콘텐츠 응용 프로그램'라우팅 된 구성 요소에서 이벤트를 받아야 구성 요소 (예 : '콘텐츠 앱 목록')

<content-app> // this is where the events should arrive 
    <content-app-header></content-app-header> 
    <router-outlet></router-outlet>  
    <content-app-list></content-app-list> //this is a routed component, that emits events and should bind data 
</content-app> 

내가 할 수있는 데이터를 처리하는 서비스를 구현하지만 프레임 워크 개념을 선호합니다.

Answer 1

이제는 라우트 된 구성 요소에 직접 데이터를 전달할 수 없습니다. 2015 년 GitHub에도 issue이 있습니다. 그러나 문제는 마감되었으며 현재 해당 기능이 지원되지 않습니다.

1. 공유 서비스
URL 또는 쿼리를 통해
2. 패스 데이터는
는

첫 번째 옵션은 분명히이를 달성하기 가장 깨끗한 방법으로 자녀의 생성자에

를 주입 부모 구성 요소입니다 PARAMS : 세 가지 옵션은 기본적으로 . 구성 요소 상호 작용에는 매우 좋은 article도 있습니다. 그러나 관찰 서비스 또는 주제를 공유 서비스에 사용하는 경우 서브 스크립 션을 잘 관리하십시오. 서비스가 싱글 톤이 될 것이기 때문에 실제로 살아 있고 메모리에 남아있을 것입니다.

두 번째 옵션은 유효한 방식입니다. ActivatedRoute을 주입하면 라우터가 Observables를 활용하기 때문에 매개 변수를 구독 할 수도 있습니다. 다음과 같이이 구현할 수 : 당신이 볼 수 있듯이

constructor(private activatedRoute: ActivatedRoute) { } 

ngOnInit() { 
    this.paramSubscription = this.activatedRoute.params.subscribe(...); 
} 

ngOnDestroy() { 
    this.paramSubscription .unsubscribe(); 
} 

, 당신이해야 할 ActivatedRoute을 주입 한 후 ngOnInit 라이프 사이클 후크의 PARAMS에 가입합니다. 언급 한 바와 같이 ngOnDestroy에서 수신 거부하십시오.

세 번째 옵션은 DI를 통해 상위 구성 요소를 하위 구성 요소에 삽입하는 것입니다.

constructor(private _parentComponent: ParentComponent) 

그런 다음 부모 구성 요소에서 메소드를 호출하고 데이터를 가져올 수 있습니다. 알림 : 해당 유형의 첫 번째 상위 항목이 주입됩니다.

결론이 나는 가능하면 공유 서비스 또는 URL/쿼리가를 PARAMS 사용하도록 제안 할 것입니다.