angular - 使用 ng-content 将一个组件导入到另一个组件中

Question

这是我的页面，我在其中调用两个组件面板和联合按钮:

<panel src="a" 
    data1="b" 
    data2="Student Id:"
    data3="Class:"
    data4="Roll No : " data5="Batch : ">
    <joint-button btnname="Edit" icon="glyphicon glyphicon-pencil" color="btn btn-primary"></joint-button>
    <joint-button btnname="Delete" icon="glyphicon glyphicon-trash" color="btn btn-danger"></joint-button>
</panel>

这是我使用过的 panel.html

<div class="col-md-3">
   <div class="custom5">
       <ng-content></ng-content>
    </div>
    <div class="custom6">
        <ng-content></ng-content>
     </div>
 </div>

这里的问题是两个关节按钮都显示在第一个 <ng-content></ng-content>

所以我的问题是::

• 首先我们可以使用 <ng-content></ng-content>不止一次。如果是的话为什么不起作用。

• 如果我们不能使用<ng-content></ng-content>不止一次那么将两个组件定位在两个不同位置的解决方案是什么。

Answer 1

ng-content 可以采用属性 select，它是要包含\select 的元素的 css 选择器。

所以这应该可行(我没有尝试过)

 <div class="custom5">
       <ng-content select="joint-button'[btnname=Edit]'"></ng-content>
    </div>
    <div class="custom6">
        <ng-content select="joint-button'[btnname=Delete]'"></ng-content>
     </div>

最近在 AngularConnect 中对此进行了演示，请观看此视频 https://www.youtube.com/watch?v=4YmnbGoh49U