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，该属性是要包含\ 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在另一个组件中导入一个组件

1 个答案: