Динамический компонент не загружается внутри патентного компонента

Я создаю динамический компонент на основе его типа.

С помощью приведенной выше структуры я создал родительский компонент, который является ParagraphComponent, и если вы заметили, что ranges имеет type, поэтому я хотел создать LinkComponent.

В чем проблема?

LinkComponent создается, но не внутри его родительского компонента. Он создается вне ParagraphComponent.

<rc-paragraph><p>This is paragraph</p></rc-paragraph>`
<app-link>/index.htm</app-link>

Но на самом деле должно быть так,

<rc-paragraph>
    <p>This is paragraph <app-link>/index.htm</app-link></p>
</rc-paragraph>

Ниже приведен код для рендеринга компонента,

private renderReactiveContent(content, container: ViewContainerRef) {

    // resolve content['_type'] to factory
    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}`);
    }

    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 = asContentCreate(component);
    cmpCreate.contentOnCreate(content);

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

      const cmpEmbeddable = 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) => {
              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();
  }

Что я делаю неправильно здесь, пожалуйста, помогите.


angular-dynamic-components
person stack s    schedule 27.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Как angular внедряет представление, если ваш хост

<span #container><span>

Затем он введет его как

<span><span>
<your-injected-view></your-injected-view>

Поэтому, когда вы пытаетесь внедрить родительский элемент, ваш родитель является хост-элементом, а дочерний элемент внедряется рядом с ним, а не внутри него.

Как это решить? Один из способов может заключаться в том, чтобы сделать элемент внутри родительского элемента хост-элементом вместо того, чтобы делать родительский контейнер хостом.

<parent>
 <span #container></span>
</parent>

Таким образом, он будет вводить его как

<parent>
  <span></span>
  <your-injected-view></your-injected-view>
</parent>

Всегда хорошо использовать <ng-container></ng-container> для внедрения представления и избежания каких-либо побочных эффектов.

person emkay    schedule 27.02.2019