angular templateRef передается родителю с использованием структурной директивы, не отображающей внутри родительского компонента - PullRequest
Новая
       20

angular templateRef передается родителю с использованием структурной директивы, не отображающей внутри родительского компонента

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

Я пытаюсь отобразить шаблон в дочернем элементе родительского компонента в зависимости от значения его типа, как описано в этой схеме

enter image description here

ЯПередав ng-шаблон в родительское представление (мой контейнер), используя myTemplateDirective 

  --myTemplateDirective--
 this.parent.setDirective(this);

 --my-container--
 setDirective(test) {
    this.tmpl = test;
 }

в моем контейнере, я передаю его my-componentenet, который имеет директиву в качестве входных данных, и отображает ее 

const element = this.template.renderTemplate(this.data ,this.viewContainerRef);


  renderTemplate(templateData, vcRef) {
this.renderCount++;

const viewData = {
  $implicit: {
    data: templateData,
    renderCount: this.renderCount
  }
};
const childView = vcRef.createEmbeddedView(this.templateRef, viewData);

// =========== WORKAROUND =============
// We have to use private API to force DOM to update
// childView['detectChanges']();
// =========== /WORKAROUND =============


this.cd.detectChanges();

return childView.rootNodes[0];
}

после создания встроенного вида результат, который я получаю из return childView.rootNodes [0]: 

<!---->

Я создал плункер, содержащий весь код, чтобы лучше понять проблему пример кода плунжера

1 Ответ

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

Согласно вашей диаграмме, вы, кажется, имеете два вложенных ng-template.

Angular преобразует следующее, которое использует структурную директиву: 

<ng-template *myTemplate>
    <div>...</div>
</ng-template>

в это: 

<ng-template myTemplate>
    <ng-template>
        <div>...</div>
    </ng-template>
</ng-template>

Это может быть проблемой в вашем случае, если вы пытаетесь визуализировать внешний шаблон, так как он будет содержать только шаблон внутри, и, следовательно, ничего не будет отображаться.

...