我正在研究Kendo的Angular2组件,特别是这个网格功能,它们在同一个组件中有多个kendo-grid-column
组件
<kendo-grid [data]="gridData" [height]="410">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Price" width="80">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="In stock" width="80">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" title="Discontinued" width="120">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
</kendo-grid>
我假设他们没有使用ng-content
和翻译实现这一点,因为当我尝试类似的东西时,我投射的所有内容都被扔进了第一个ng-content。
这是我的parent.component.html的样子:
<app-side-pane *ngIf="tester">
<app-side-pane-header
[employeeName]="employee.formattedName"
[employeeStatus]="employee.employeeStatus"
[employeeImage]=""
[employeeTitle]="employee.jobTitle"
[employeeCountry]="employee.homeCountry"
></app-side-pane-header>
<app-side-pane-body>
<app-side-pane-body-slide [slideTitle]="'Reference Data'">
<app-side-pane-body-slide-item></app-side-pane-body-slide-item>
</app-side-pane-body-slide>
<app-side-pane-body-slide [slideTitle]="'Foo Bar'"></app-side-pane-body-slide>
</app-side-pane-body>
</app-side-pane>
这是我的app-side-pane-body.html:
<div class="boxes">
<div class="boxcontent" >
<div class="swiper-container">
<div class="swiper-wrapper">
<ng-content></ng-content>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
</div>
</div>