我们如何在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