@ViewChild() 또는 유사품을 라우터 콘센트와 함께 사용할 수 있습니까? 만약 그렇다면?

Question

나는 반복해서 내가 오히려 선택보다 라우터 콘센트의 반대편에 존재하는 하위 구성 요소에 액세스하고 싶은 상황으로 실행 : 나는 그것을 알고있는 ViewChild 기능을 가진

Like: 
<router-outlet></router-outlet> 

NOT: 
<selector-name></selector-name> 

이 충돌, 그럼에도 불구하고 내 구성 요소가 셀렉터 태그 안에있는 것과 마찬가지로 쉽게 라우터 콘센트 내부에있는 것을보고 상호 작용할 수 있어야합니다.

export class RequestItemCatsComp { 
    @ViewChild('child') child: RequestItemsComp; 
    ***etc...*** 
ngAfterViewInit() { 
    if (this.child) // Always child is undefined 
     this.groupId = this.child.groupId; 
    } 
} 

그러나 이것은 잘못된 방법이기 때문에 자연스럽게 아이가 정의되지 않는다 :

는 예를 들어 나는이 시도. 올바른 방법이 있습니까?

서비스를 사용하여 데이터를 공유하려고하지만 "확인한 후에 표현식이 변경되었습니다"라는 해킹 문제없이 다른 문제가 발생합니다. 해킹이나 개선 모드를 사용하지 않고 해결할 수 있기를 바랍니다.

Answer 1

이벤트를 활성화하면 라우터 콘센트에서 인스턴스화 된 구성 요소에 대한 참조를 얻을 수 있습니다.

는

라우터 출구 activate 이벤트에 새로운 요소 가 인스턴스화 될 때마다 발광 할 RouterOutlet Docs

발췌하고 파괴 을중인 비활성화 이벤트.

예는

다음

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Basic Angular 2</h3> 
    <router-outlet (activate)="onActivate($event)" ></router-outlet> 
    ` 
}) 
export class AppComponent { 
    constructor(){} 

    onActivate(componentRef){ 
    componentRef.sayhello(); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h3 class="title">Dashboard</h3> 
    ` 
}) 
export class DashboardComponent { 
    constructor(){} 

    sayhello(){ 
    console.log('hello!!'); 
    } 
} 

이 도움이 Plunker!!

희망입니다!