首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从json响应创建动态嵌套组件

从json响应创建动态嵌套组件
EN

Stack Overflow用户
提问于 2019-05-24 02:58:25
回答 1查看 624关注 0票数 2

我正在尝试创建基于json响应的嵌套动态组件。

代码语言:javascript
复制
public content={type:'paragraph',depth:1,text:'Root',entityRanges:[{type:'LINK',offset:83,length:16,data:{target:'_self',url:'/index.htm'}}],embbeded:[{type:'text',text:'This is Text component'}]}

因此,在上面的结构中,它是paragraph类型,因此需要首先呈现ParagraphComponent

它是一个数组对象embbeded,在这个数组中我想渲染TextComponent

所以最终的输出应该是这样的,

代码语言:javascript
复制
<paraComp><p><textComp>This is Text component</textComp></p></paraComp>

下面是我尝试过的内容,

主组件

代码语言:javascript
复制
export class AppComponent implements OnInit {
  @ViewChild('container', { read: ViewContainerRef })
  public target: ViewContainerRef;
  public content = { type: 'paragraph', depth: 1, text: 'Root', entityRanges: [{ type: 'LINK', offset: 83, length: 16, data: { target: '_self', url: '/index.htm' } }], embbeded: [{ type: 'text', text: 'This is Text component' }] }

  constructor(private createDynamicComponentService: CreateDynamicComponentService) { }
  ngOnInit() {
    this.createDynamicComponentService.createComponent(this.content, this.target);
  }
}

主HTML

代码语言:javascript
复制
<ng-container #container></ng-container>

createDynamicComponentService

代码语言:javascript
复制
export class CreateDynamicComponentService {
  private rootViewContainer: ViewContainerRef;
  private componentFactory: ComponentFactory<any>;
  private componentReference;
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    @Inject(CONTENT_MAPPINGS) private contentMappings: any
  ) { }

  setRootViewContainerRef(view: ViewContainerRef): void {
    this.rootViewContainer = view;
  }

  createComponent(content: any, container: ViewContainerRef) {
    const type = this.contentMappings[content.type];
    console.log(type);
    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(type);
    this.componentReference = this.rootViewContainer.createComponent(this.componentFactory);
    this.componentReference.instance.contentOnCreate(content);
  }
}

链接到项目https://stackblitz.com/edit/angular-dynamic-new?file=src/app/app.component.ts

我引用了这个https://github.com/sparkles-dev/ng-content-driven-angular/blob/master/src/app/reactive-content/content-host/content-host.component.ts

仅基于此,我已经创建了我的项目。但不能让它工作。

请帮帮忙。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56281422

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档