Question

我在angular2中有一个父组件，它将几个组件加载为：

<component-property-editor component-name="array-obj-editor" [(component-model)]="selectedCol.model.data"></component-property-editor>

以上语句加载array-obj-editor组件及其模型。

基本上它是一个父组件，它接受组件名称＆amp; madel作为输入，然后呈现其视图。

到目前为止，我能够正确渲染组件。

使用DynamicComponentLoader，如下所示：

import { Component, OnInit, Type, Input, DynamicComponentLoader, ViewContainerRef, ViewChild} from '@angular/core';
import {ArrayObjEditorComponent} from './editors/array-obj-editor/array-obj-editor.component';
import {FontSelectEditorComponent} from './editors/font-select-editor/font-select-editor.component';    
@Component({
  moduleId: module.id,
  selector: 'component-property-editor',
  templateUrl: 'component-property-editor.component.html',
  styleUrls: ['component-property-editor.component.css'],
})
export class ComponentPropertyEditorComponent implements OnInit {
    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input('component-name') componentName: string;
    @Input('component-info') componentInfo: string;
    @Input('component-model') componentModel: Object;

    typesRegister: Type[] = [ArrayObjEditorComponent,FontSelectEditorComponent];
    keysRegister: string[] = ['array-obj-editor','font-select-editor'];
    constructor(private dcl: DynamicComponentLoader) { }
    ngAfterViewInit() {
        console.log('Property Editor' + this.componentName + " Loading");
        let componentIndex = this.keysRegister.indexOf(this.componentName);
        this.dcl.loadNextToLocation(this.typesRegister[componentIndex],
            this.target).then(ref =>{ ref.instance.componentModel = this.componentModel; });
            console.log('Property Editor...' + this.componentName + " Loaded");
    }
}

但它是一个递归过程。即我想在加载的组件中加载component-property-editor即父组件。

我尝试在component-property-editor

中添加array-obj-editor作为指令

但它没有用。它显示如下错误：

组件视图'ArrayObjEditorComponent'上的意外指令值'undefined'

如何在angular2中加载父组件作为其子组件的子组件？

0 个答案: