Question

我正在尝试将组件动态添加到父组件的子组件中。我已经注入了子组件，以便我可以调用它的方法，以便将组件添加到子组件中。我是这样做的：

test.ts

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，其中包含对添加元素的引用。

Angular2 - 尝试将父组件添加到子组件中

1 个答案: