Как обрезать часть представления angular и представить ее - PullRequest
Новая
       19

Как обрезать часть представления angular и представить ее

1 голос
/ 18 марта 2020

Я хочу создать 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> в местах с комментариями?

Обходной путь: Я изучил это решение но это не то, что я хочу точно.

1 Ответ

1 голос
/ 18 марта 2020

Вам необходимо использовать атрибут 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>, который уже был выбран. здесь хорошая статья, которая объясняет это далее.

...