我們如何在kendo-tabstrip-tab中動態加載組件？

Question

在角1，我們達到了這一使用下面的代碼：

<div kendo-tab-strip k-content-urls="[ 
'/app/Partial/general.html', 
'/app/Partial/employee.html', 
'/app/Partial/department.html', 
'/app/Partial/report.html']" k-options="tabOptions"> 
     <!-- tab list --> 
     <ul class="print-item"> 
      <li class="k-state-active" data-item="general">General</li> 
      <li data-item="employee">Employee</li> 
      <li data-item="department">Department</li> 
      <li data-item="report">Report</li> 
     </ul> 
    </div> 

我們可以實現在劍道-UI-angular2一樣嗎？我沒有找到與此有關的文檔中的任何內容。

Answer 1

在Angular2中，您應該創建新組件並通過將它們的標籤添加爲tabstrip內容來引用它們。

<kendo-tabstrip> 
     <kendo-tabstrip-tab [title]="'Paris'" [selected]="true"> 
       <weather-paris></weather-paris> 
     </kendo-tabstrip-tab> 
     <kendo-tabstrip-tab [title]="'Book Tickets'"> 
        <tickets-paris></tickets-paris> 
     </kendo-tabstrip-tab> 
    </kendo-tabstrip> 

然後創建與他們相關的HTML模板一個新的組件（或使用templateUrl財產，如果你有一個HTML模板文件）。例如，對於耐候巴黎組分：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'weather-paris', 
    template: '<div>The weather in Paris is {{degrees}} degrees.</div>' 
}) 
export class MyComponent { 
    degrees: number; 
    constructor() { 
    this.degrees = 15; 
    } 
} 

上的組件更多信息here