각도 2 ES5를 사용한 ViewChild 구현

Question

각도 2에 대한 앱을 ES5와 함께 쓰고 있습니다.

뷰 구성 요소를 동적으로로드 한 구성 요소를 갖고 싶습니다. 기존 구성 요소를로드합니다. ,

나는 타이프의 예를 보았다하지만 난 ES5에서 그렇게하고 동적으로로드, 존재와 (지시어로 표시) DOM 요소의 내용을 ng.core.Directive에 기반 구성 요소 생성자에서 ng.core.ViewChild를 주입하고 업데이트에 실패하고 구성 요소.

나는

queries:[ 
    formBody: ng.core.ViewChild('formBody') 
] 

으로 시도했습니다 ... 그리고 나는 ElementRef를 얻을 수 있지만, 동적으로로드 된 구성 요소와 DOM의 내용을 업데이트 할 ViewContainerRef 필요합니다.

queries:[ 
    formBody: ng.core.ViewChild(app.FormBodyDirective) 
] 

을 ...하지만 나는 "빈"개체를 얻을 :

은 내가 시도했습니다. 내가 구성 요소 생성자에 ng.core.ViewContainerRef를 주입하는 것을 시도했다

ngAfterViewInit: function() { 
    var dialogComponentFactory = this.componentResolver.resolveComponentFactory(app.FormBody1_Component); 
    this.formBody = this.formBody.createComponent(dialogComponentFactory); 
}, 

: __proto__ object

구성 요소는 다음과 같이로드

.Class({ 
     constructor: [ 
     ng.core.ViewContainerRef, 
     function(viewContainer){ 
      this.formBody = viewContainer 
     }], 

그러나 물론 이것은 나의 'QFORM'요소에 대한 ng.core.ViewContainerRef의 인스턴스를 주입 , 그리고 'qform'요소의 끝에 동적으로로드 된 구성 요소를 얻습니다.

plunk에 대한 링크 (작동하지 않는) 내 코드와 R http://plnkr.co/edit/mRxGKYvKy8tHRjupNzju?p=preview

누군가가 나이 밖으로 정렬하는 데 도움 또는 힌트를 던져한다면 나는 매우 감사하게 될 것입니다

..

감사합니다!

Answer 1

마지막으로 해결책을 찾았습니다. 나는 이것이 최고이고 가장 우아한 방법이라고 확신하지는 않지만 작동한다.

지시어 생성자에 ng.core.ViewContainerRef을 삽입하고 인스턴스를 클래스 멤버에 저장했습니다.

지시문 클래스 멤버는 구성 요소 내에서 액세스 할 수있었습니다. 구성 요소의 queries 옵션을 통해 사용할 수 있습니다.

이 지침 :

app.FormBodyDirective = 
    ng.core.Directive({ 
     selector: '[formBody]' 
    }).Class({ 
     constructor: [ 
     ng.core.ViewContainerRef, 
     function(viewContainer){ 
      this._viewContainer = viewContainer; 
     }] 
    }); 

구성 요소 :

//... 
queries : { 
    formBody: new ng.core.ViewChild(app.FormBodyDirective) 
}, 
directives:[ app.FormBodyDirective ] 
//... 

근무 plunker : http://plnkr.co/edit/ooWhiMqSFDtGNGdW3LMK?p=preview