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

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

0 голосов
/ 27 февраля 2019

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

С вышеупомянутой структурой я создал родительский компонент, который 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();
  }

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

1 Ответ

0 голосов
/ 27 февраля 2019

Как угловое внедрение внедряет представление в том, что если ваш хост 

<span #container><span>

, то он будет внедрять его как 

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

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

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

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

Таким образом, он вставит его как 

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

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

...