통화 부모 구성 요소 전부 여기

Question

먼저 내 의 내부 구성 요소의 방법 I은 동적 탭 컨트롤이 본질적 Plunkr

이다. 여러 개의 탭이 있으며 각 탭에는이 '지연로드'구성 요소에서 상속하는 구성 요소가 포함됩니다. 달성하고자하는 기능은 사용자가 탭을 클릭하면 탭에 포함 된 구성 요소 내에서 'loadData'를 호출한다는 것입니다.

@ViewChild 또는 @ContentChild를 사용하여 하위 구성 요소에 액세스하려고 시도했지만 아무 것도 작동하지 않는 것 같습니다.

<div [hidden]="!active" class="pane"> 
    <ng-content></ng-content> 
</div> 

그리고 탭 구성 요소 내 재산 '활성'의 세터에, 나는 내에서 개최되는 어떤 구성 요소의 .loadData() 메서드를 호출 할 :

탭의 템플릿입니다 요소. 달성 가능합니까?

Answer 1

그것은

ngAfterContentInit() { 
    if(this.component) { 
     this.component.loadData(); 
    } 
    } 

    @ContentChild(DelayLoadComponent) component: DelayLoadComponent; 

와 나를 위해 작동하지만 구성 요소 게으른 부하를하지 않습니다.

Plunker example

은 아마도 당신은 탭이 활성화 된 경우에만 구성 요소를 DOM에 추가하는 *ngIf를 추가 할.