我们如何在 kendo-tabstrip-tab 中动态加载组件？

Question

在 angular 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>

我们可以在 kendo-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

我们如何在 kendo-tabstrip-tab 中动态加载组件？

How can we load component dynamically in kendo-tabstrip-tab?

kendo-ui

kendo-tabstrip

kendo-ui-angular2

angular