Angular2:Kendo如何使用相同的选择器传递多个组件?

时间:2017-06-20 04:25:15

标签: angular kendo-ui kendo-grid

我正在研究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>

dupe.png enter image description here

0 个答案:

没有答案