Повторное использование содержимого Angular ngb-вкладок на нескольких вкладках с ngTemplateOutlet или чем-то еще - PullRequest
Новая
       77

Повторное использование содержимого Angular ngb-вкладок на нескольких вкладках с ngTemplateOutlet или чем-то еще

0 голосов
/ 28 мая 2020

Я использую Angular ng-tabset для отображения некоторых вкладок. Моя вкладка ngb выглядит примерно так: 

<ngb-tab id="mytabs">
    <ng-template ngbTabTitle>
        <div data-locator="xxxe">yyy</div>
    </ng-template>
    <ng-template ngbTabContent>
        ...
        ...
        ...
    </ng-template>
</ngb-tab>

, что отлично работает. Но в этом шаблоне есть еще несколько вкладок, на которых я хочу отображать тот же контент. Итак, с целью повторного использования я пытался переместить содержимое вкладки отдельно и использовать его ссылку на каждой вкладке, где я хочу, чтобы это отображалось. Я не знаю, как это сделать. Я попытался поместить его в отдельный <ng-template> как: 

<ng-template #testing>
    <ng-template ngbTabTitle>
        <div data-locator="xxxe">yyy</div>
    </ng-template>
    <ng-template ngbTabContent>
        ...
        ...
        ...
    </ng-template>
<ng-template

и на вкладке, где мне это нужно, я пытаюсь назвать это как: 

<ngb-tab id="mytabs">
    <ng-container *ngTemplateOutlet="testing"></ng-container>    // referring the #testing above
</ngb-tab>

OR:

<ngb-tab id="mytabs">
    <ng-template *ngTemplateOutlet="testing"></ng-template>
</ngb-tab>

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

Ответы [ 2 ]

0 голосов
/ 28 мая 2020

Надеюсь, я правильно понял ваш вопрос. Для повторного использования шаблонов вы можете создавать собственные компоненты. Для повторного использования logi c вы можете создавать сервисы. 

<ngb-tab id="mytabs">
    <ng-template ngbTabTitle>
        <my-xyz-comp data-locator="xxxe"></my-xyz-comp>
    </ng-template>
    <ng-template ngbTabContent>
        <my-xyz-comp data-locator="aaaa"></my-xyz-comp>
    </ng-template>
</ngb-tab>
0 голосов
/ 28 мая 2020

Я бы посоветовал не вкладывать ng-шаблоны и использовать их с разными идентификаторами, а затем вставлять их в ngb-tab отдельно, например: 

<ng-template ngbTabTitle #testTitle>
    <div data-locator="xxxe">yyy</div>
</ng-template>
<ng-template ngbTabContent #testContent>
    ...
    ...
    ...
</ng-template>
<ngb-tab id="mytabs">
    <ng-container *ngTemplateOutlet="testTitle"></ng-container>    
    <ng-container *ngTemplateOutlet="testContent"></ng-container>
</ngb-tab>
...