1

我想在库中的 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>

在我的<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>在评论的地方使用？

解决方法：我已经研究过这个解决方案，但这并不是我想要的。

4

1 回答 1

1

您需要使用selecton 属性<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属性，该属性允许您控制渲染哪些元素以及在哪里渲染。to 的参数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>

于 2020-03-18T08:30:25.837 回答