Question

基于类型，我想以角度渲染组件。

例如，使用下面的代码，我想动态呈现标题组件。

{
 "type": "heading-1",
 "text": "Sample Text"
}

以下是呈现动态组件的逻辑

private renderReactiveContent(content: ContentDocument, container: ViewContainerRef) {

    // resolve content['_type'] to factory
    const type: Type<any> = this.contentMappings[content[0].type];
    if (!type) {
      throw new ReferenceError(`No content mapping for type=${content[0].type}`);
    }

    const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(type);
    const component = container.createComponent(componentFactory, container.length, this.injector);
    console.info('Component dynamically created ', component);

    // content lifecycle hook: notify of new values
    const cmpCreate: ContentOnCreate = asContentCreate(component);
    cmpCreate.contentOnCreate(content);

    // render embedded content
    if (content && Object.keys(content).length > 0) {

      const cmpEmbeddable: ContentEmbeddable = asContentEmbeddable(component);
      if (cmpEmbeddable) {

        // render in the target element of ContentEmbeddable
        const childContainer = cmpEmbeddable.contentEmbeddable();

        Object.keys(content).forEach((key: string) => {
          const value = content[key];

          // XX: recursive rendering
          if (value instanceof Array) {
            value.forEach((v: ContentDocument) => {
              this.renderReactiveContent(v, childContainer);
            });
          } else {
            this.renderReactiveContent(value, childContainer);
          }
        });

      } else {

        // fatal: embedded content must be hosted by ContentEmbeddable
        const cmpName = component.instance['constructor'].name;
        throw new TypeError([`Trying to render embedded content.`,
          `${cmpName} must implement interface ContentEmbeddable`].join(' '));

      }

    }
    component.hostView.detectChanges();
  }

我不确定我在做什么错，它会引发错误

ERROR TypeError: Trying to render embedded content. HeadlineComponent must implement interface ContentEmbeddable

我已经创建了stackblitz，请参考项目。

https://stackblitz.com/edit/angular-7q1izn？

Answer 1

首先，正如错误所指出的那样，您的组件必须实现接口ContentEmbeddable。您可以这样做（对于要动态创建的每个组件）：

import { Component, OnInit, Input, ViewContainerRef, ViewChild } from '@angular/core';
import { ContentOnCreate, ContentEmbeddable } from '../../render/content.interfaces';

@Component({
  selector: 'rc-headline',
  template: `<h1>{{ text }}</h1>`
})
export class HeadlineComponent implements OnInit, ContentOnCreate, ContentEmbeddable {
  @Input()
  public text: string;

  constructor(private containerRef: ViewContainerRef) { }

  ngOnInit() {
  }

  contentOnCreate(values: { [key: string]: any; }): void {
    this.text = values.text;
  }

  contentEmbeddable(): ViewContainerRef {
    return this.containerRef;
  }

}

但是项目仍然会引发错误：

No content mapping for type=undefined

替换此：

const type: Type<any> = this.contentMappings[content[0].type];
if (!type) {
  throw new ReferenceError(`No content mapping for type=${content[0].type}`);
}

与此：

var type: Type<any>;
if (content instanceof Array) {
  type = this.contentMappings[content[0].type];
} else {
  type = this.contentMappings[content.type];
}
if (!type) {
  return;
  // throw new ReferenceError(`No content mapping for type=${type}`);
}

在content-host.component.ts文件中（renderReactiveContent方法）将修复该错误，您应该看到示例标题和三个段落。参见StackBlitz演示及解决方案。

基于角度类型的动态组件加载

1 个答案: