Angular 4 ng-шаблон в другом ng-шаблоне не работает

Я использую компонент ng-bootstrap ngtabset. Когда я вставляю ng-templates, я ничего не вижу в представлении. Может кто-нибудь объяснить, почему и как это решить?

Следующее работает и показывает мне две вкладки с видимым содержимым обеих вкладок соответственно.

<ngb-tabset>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 1</ng-template>
        <ng-template ngbTabContent>
          This is tab 1 content
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 2</ng-template>
        <ng-template ngbTabContent>
            This is tab 2 content
        </ng-template>
      </ngb-tab>
</ngb-tabset>

Следующее не работает, так как я не вижу содержимое вкладки 2.

<ngb-tabset>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 1</ng-template>
        <ng-template ngbTabContent>
          This is tab 1 content
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 2</ng-template>
        <ng-template ngbTabContent>
            <ng-template>This is tab 2 content</ng-template>
        </ng-template>
      </ngb-tab>
</ngb-tabset>

Зачем мне это делать? У меня есть настраиваемый компонент, который принимает TemplateReference, который необходимо отображать в содержимом вкладки 2.


angular ng-bootstrap angular2-template ng-template
person andthereitgoes    schedule 29.11.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как вы сказали, у меня есть пользовательский компонент, который принимает TemplateReference

Это означает, что у вас есть переменная TemplateRef в вашем классе компонентов. Поэтому вместо использования ng-template вы должны использовать ng-container и спроецировать свой шаблон в этот контейнер с помощью ngTemplateOutlet.

<ng-template ngbTabContent>
      <ng-container *ngTemplateOutlet="your_template_ref_variable"></ng-container>
</ng-template>
person Ankit Kapoor    schedule 29.11.2017
comment
Спасибо. Это сработало, но теперь, когда я нажимаю между вкладками, содержимое обоих тегов добавляется к предыдущему содержимому «это вкладка 1», «это вкладка 1», «это вкладка 1», а не просто переключение между существующим контентом. Каждый раз, когда я нажимаю на вкладку, добавляется новый <div role="tabpanel" class="tab-pane active" aria-labelledby="ngb-tab-0" id="ngb-tab-0-panel" aria-expanded="true"> </div> - person andthereitgoes; 29.11.2017
comment
Спасибо. Я сам собрал плункер и пытался воспроизвести его, используя свой компонент, но не могу воспроизвести проблему на плункере. После локальной отладки моего кода я понял, что это как-то связано с ngOnChange, и объект TemplateReference передается ему как SimpleChanges, когда я нажимаю между вкладками. - person andthereitgoes; 29.11.2017