Angular 如何剪裁角度视图的一部分并表示它

我想在库中的Angular 8中创建一个TabComponent。因此，我希望最终用户像这样使用我的组件：

<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>

<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>

<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>

表1
我的标签1内容
表2
我的标签2内容

在我的

组件中，我有这样一个代码：

<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>

<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>

<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>

问题是，我如何在上面写的地方表示我的标签药片和内容

有没有办法在有评论的地方使用

---

Workgaround:我已经研究过了，但这不是我想要的。

您需要使用

上的

选择
属性来区分投影上的元素。它应该是这样工作的：

<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>

<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>

<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>



这里的关键是
接受
select
属性，该属性允许您控制渲染哪些元素以及渲染位置。
select
的参数是要渲染的元素的css选择器。例如，它可以是类
select=“.myClass”
属性
select=“[myAttr]”
或标记
select=“span”
。如果不提供
select
属性
ng content
将呈现未使用
select
属性选择的所有其他内容。因此，例如，在上面的代码中，
将仅呈现
中的
ng内容
和
除已选择的
之外的其余内容。是一篇很好的文章，进一步解释了这一点。
是的，但是如果我想完全控制药片怎么办。我不想只把用户代码复制到我的标签头上。@HamedZakeryMiab我更新了上面的答案。希望能有帮助。