Как вырезать часть углового обзора и представить ее

Question

Я хочу создать TabComponent в Angular 8 в библиотеке. Поэтому я хочу, чтобы конечный пользователь использовал мой компонент следующим образом:

<tab-view>
    <tab-pane>
        <tab-title>
            <h1>Tab 1</h1>
        </tab-title>
        My Tab 1 Content
    </tab-pane>
    <tab-pane>
        <tab-title>
            <h1>Tab 2</h1>
        </tab-title>
        My Tab 2 Content
    </tab-pane>
</tab-view>

и внутри моего <tab-view> компонент, у меня такой код:

<div class="tab-view">
    <div class="tab-view-pills">
        <!-- I wan't my tab titles appear here -->
    </div>
    <div class="tab-view-panes">
        <!-- I wan't my contents appear here -->
    </div>
</div>

вопрос в том, как я могу представить свои таблетки и содержимое в том месте, которое я написал выше?

Есть ли способ использовать <ng-content> в прокомментированных местах?

Решение: я изучил это решение, но это не совсем то, что мне нужно.

Answer 1

Вам нужно использовать select атрибут на <ng-content>различать элементы на проекции. Это должно работать так:

<div class="tab-view">
  <div class="tab-view-pills">
    <ng-content select="tab-title"></ng-content>
  </div>
  <div class="tab-view-panes">
    <ng-content></ng-content>
  </div>
</div>

Ключевым моментом здесь является то, что <ng-content> принимает selectатрибут, который позволяет вам контролировать, какие элементы отображаются и где. Аргумент кselectэто селектор CSS для элементов, которые вы хотите отобразить. Например это может быть классselect=".myClass" атрибут select="[myAttr]" или тег select="span". Если вы не предоставитеselect атрибут ng-content отобразит все остальное, что не было выбрано selectатрибут. Так, например, в приведенном выше коде<ng-content select="tab-title"></ng-content> будет отображать только <tab-title> внутри этого ng-content а также <ng-content></ng-content> остальное содержание кроме <tab-title>которые уже были выбраны. вот хорошая статья, которая объясняет это дальше.