kendo-tabstrip-tabではどのようにコンポーネントを動的に読み込むことができますか？角度1で

Question

は、我々は次のコードを使用して、これを達成した：

<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では、新しいコンポーネントを作成して、そのタグをタブストリップコンテンツとして追加して参照する必要があります。

<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テンプレートを使用して新しいコンポーネントを作成します（または、htmlテンプレートファイルがある場合はtemplateUrlプロパティを使用します）。天候・パリ・コンポーネントの例：コンポーネントの

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