使用 ng-content 在另一个组件中导入一个组件

Question

这是我的页面，我在其中调用两个组件 Panel 和 jointbutton:

<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 设为 include\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

使用 ng-content 在另一个组件中导入一个组件

Import One component in another component using ng-content

angular