Angular2-嘗試將組件從父組件添加到子組件

Question

我試圖將組件從父組件動態添加到子組件中。 我已經注入了子組件，以便可以調用其方法以便將組件添加到子組件中。 這是我的做法：

測試

import {Component, DynamicComponentLoader,ElementRef,AfterViewInit} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ChildComponent} from './child_test.ts';


@Component({
    selector: 'app',
    template: '<div #element></div>',
    providers: [ChildComponent,ElementRef]
})
class AppComponent implements AfterViewInit{
    constructor(private _loader: DynamicComponentLoader, private _elementRef: ElementRef, private _childComponent: ChildComponent) {
    }

    ngAfterViewInit(){
        this._loader.loadIntoLocation(ChildComponent,this._elementRef,'element');
        this._childComponent.addElement();
    }

}

bootstrap(AppComponent);

child_test.ts

import {Component, ElementRef,DynamicComponentLoader} from 'angular2/core';

@Component({
    selector: 'element',
    template: '<div>Test Element</div>'
})
export class MyElement{}



@Component({
    selector: "child-component",
    template: "<div>Child Component</div>"
})
export class ChildComponent{

    constructor(public _elementRef: ElementRef,private _loader: DynamicComponentLoader){}
    public addElement(){
        this._loader.loadNextToLocation(MyElement,this._elementRef);
    }
};

執行test.ts時，出現以下錯誤：

TypeError：無法讀取未定義的屬性“ getViewContainerRef”

Answer 1

不知道我是否完全理解您的問題，但是我認為這就是您想要的

ngAfterViewInit(){
    this._loader.loadIntoLocation(ChildComponent,this._elementRef,'element')
    .then(childComponent => childComponent.instance.addElement());
}

this._loader.loadIntoLocation(...)返回一個Promise ，該Promise包含對所添加元素的引用。