@ContentChild의 각도 2 참조 동적 인스턴스

Question

각도 2.0.1을 사용하고 있습니다.

<ng-content>을 통해 다른 구성 요소를 사용할 수있는 구성 요소가 있습니다.

주입 된 구성 요소를 참조하고 싶습니다. 내가 <ng-content>은 지금까지 내가 말할 수있는 하나 개의 요소가 될 것이라는 점을 알았다면

: @ContentChild(MyComponent) dynamicTarget: IMyComponent;를하지만 어떤 구성 요소가 될 수 있기 때문에 (내가 만드는 것이 유일한 가정은 어떤 주입 구성 요소가 특정 인터페이스를 구현된다)가 까다 될 .

또한 <ng-content #dynamicTarget'>을 시도한 다음 @ContentChild('dynamicTarget') dynamicTarget: IMyComponent;이라고 말하면이 값은 정의되지 않은 값을 나타냅니다.

누구나 내가이 기능이 컴포넌트의 인스턴스이므로 Angular 2에 어떻게 함수를 호출 할 수 있는지 알 수 있습니까?

유스 케이스를 더욱 명확히하기 위해 콘텐츠로 모든 구성 요소를 수용 할 수있는 다중 단계 마법사가 있으며 내용에 validate 함수를 호출하려고합니다 (다시 말하면,)

Answer 1

하나의 접근법은 어떤 동적 구성 요소에도 동일한 #id을 부여하는 것일 수 있습니다. 나는 #thoseThings을 받았습니다. (나는 거의 @Missingmanual과 같다고 생각한다.)

PLUNKER (일치하는 부분을 보려면 콘솔을 참조하십시오.)

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [style.border]="'4px solid red'"> 
    I'm (g)Root. 

    <child-cmp> 
     <another-cmp #thoseThings></another-cmp> 
    </child-cmp> 
    </div> 
    `, 
}) 
export class App { 
} 


@Component({ 
    selector: 'child-cmp', 
    template: ` 
    <div [style.border]="'4px solid black'"> 
     I'm Child. 
     <ng-content></ng-content> 
    </div> 
    `, 
}) 
export class ChildCmp { 
    @ContentChildren('thoseThings') thoseThings; 

    ngAfterContentInit() { 
    console.log(this.thoseThings); 

    this.validateAll(); 

    if(this.thoseThings){ 
    this.thoseThings.changes.subscribe(() => { 
     console.log('new', this.thoseThings); 
    }) 
    } 
    } 

    validateAll() { 
    this.thoseThings.forEach((dynCmp: any) => { 
     if(dynCmp.validate) 
     dynCmp.validate(); // if your component has a validate function it will be called 
    }); 
    } 
} 


@Component({ 
    selector: 'another-cmp', 
    template: ` 
    <div [style.border]="'4px solid green'"> 
     I'm a Stranger, catch me if you can. 
    </div> 
    `, 
}) 
export class AnOtherCmp { 
} 

Answer 2

• 이전 버전 https://github.com/angular/angular/issues/8580에서 작동하는 데 사용되는 슈퍼 클래스에 의해 쿼리는하지만 난 그게

NgModule와 함께 작동하도록 할 수 없습니다3210

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, Parent, Transcluded1, Transcluded2 ], 
    providers: [ 
    {provide: TranscludedBase, useExisting: Transcluded1, multi:true} 
    {provide: TranscludedBase, useExisting: Transcluded2, multi:true} 
    ], 
    bootstrap: [ App ] 
}) 

Plunker example

• 당신은 마법사 단계 대신 탭 동적 구성 요소 생성Angular 2 dynamic tabs with user-click chosen components를 사용할 수 있습니다. 그들을 투사 이외에 입력에 명시 적 요소를 통과 할

• 또 다른 방법은 다음과 같습니다

Plunker example

Answer 3

당신이 알고있는 경우 모든 당신의 구성 요소는 validate이고 동일한 인터페이스를 구현합니다. IValidate, 당신은이 요청 된 인터페이스에 맞는로

@ContentChild('IValidate') dynamicTarget: IValidate; 
// ... 
this.dynamicTarget.validate(); 

각도만큼 정확한 클래스에 대해 상관하지 않는다 말할 수 있습니다.