Question

我正在尝试根据type文件中的mock.ts字段来呈现动态组件

下面是模拟的结构

export const Mock = {
  data: {
    areas: [
      {
        sections: [
          {
            rjf: [
              {
                type: 'heading-1',
                depth: 0,
                text: 'Heading Component',
              }
            ]
          },
          {
            rjf: [
              {
                type: 'paragraph',
                depth: 0,
                text: 'This is a paragraph',
              }
            ]
          },
          {
            rjf: [
              {
                type: 'heading-1',
                depth: 0,
                text: 'Heading Component',
              },
              {
                type: 'paragraph',
                depth: 1,
                text: 'This is a paragraph',
              },
              {
                type: 'paragraph',
                depth: 1,
                text: 'This is a paragraph',
              },
              {
                type: 'paragraph',
                depth: 1,
                text: 'This is a paragraph',
                inlineStyleRanges: [{
                  style:'BOLD',
                  offset: 83,
                  length: 16,
                }],
                inlineEntityRanges: [
                  {
                    type: 'LINK',
                    offset: 83,
                    length: 16,
                    data: {
                      target: '_self',
                      url: '/index.htm'
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
};

基于上述模拟，我的component.ts看起来像这样，

  constructor() {
    Mock.data.areas.forEach((val) => {
      this.content = val.sections;
    });;
  }

然后，我将内容数据通过hostComponent发送到@input，下面是用于出租组件的代码

  private renderReactiveContent(content, container: ViewContainerRef) {
    let type: Type<any>;
    if (content && Object.keys(content).length > 0) {
      Object.keys(content).forEach((key: string) => {
        const values = content[key].rjf;
        if (content instanceof Array) {
          type = this.contentMappings[values[0].type];
        } else {
          type = this.contentMappings[values.type];
        }
        if (!type) {
          return;
        }
      });
    }

    const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(type);
    const component = container.createComponent(componentFactory);
    component.instance.contentOnCreate(content);

    // render embedded content
    if (content && Object.keys(content).length > 0) {
      Object.keys(content).forEach((key: string) => {
        const value = content[key];
        if (value instanceof Array) {
          value.forEach((v) => {
            this.renderReactiveContent(v, container);
          });
        } else {
          this.renderReactiveContent(value, container);
        }
      });
    }
    component.hostView.detectChanges();
  }

那这里是什么问题？

我在控制台中收到Error: Cannot read property 'type' of undefined。

我在这里做错了什么？请引导我。

我也创建了一个可以正常工作的原型，请参考以下链接

https://stackblitz.com/edit/angular-anhm5k?file=src/app/render/content-host.component.ts

Answer 1

设置此条件

 const values = content[key].rjf;
    if (content instanceof Array) {
      if(this.contentMappings[values[0]]){
        type = this.contentMappings[values[0].type];
      }
    } else { ....

还要添加

if(type){
const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(type);
const component = container.createComponent(componentFactory);
component.instance.contentOnCreate(content);

// render embedded content
if (content && Object.keys(content).length > 0) {
  Object.keys(content).forEach((key: string) => {
    const value = content[key];
    if (value instanceof Array) {
      value.forEach((v) => {
        this.renderReactiveContent(v, container);
      });
    } else {
      this.renderReactiveContent(value, container);
    }
  });
}
component.hostView.detectChanges();
}
}

Answer 2

根据我对代码的理解，您正在解析renderReactiveContent（content，..）方法中的JSON错误。 content是数组类型，您将其视为对象。如果您看到下面的代码，它将正确解析您的内容参数。错误：无法读取未定义的属性“类型”了。

 let type: Type<any>;

if (content && content.length > 0) {
  content.forEach((item: any) => {
    let objKey = Object.keys(item);
    const values = item['rjf'];

    if (values instanceof Array) {
      type = this.contentMappings[values[0].type];

    } else {
      type = this.contentMappings[values.type];

    }
    if (!type) {
      return;
    }
  });
   console.log(type);
}

但是，还有另一个错误“在NgModule的entryComponent属性中未定义动态组件”。我看到您正在尝试使用JSON创建动态组件。要创建动态组件，必须在entryComponents中提及它们。你最近怎么样？

加载动态组件时未定义的错误“类型”

2 个答案: