如何在 Kendo Tabstrip 中使用 Angular 实现关闭标签按钮

Question

我有一个 kendo-tabstrip，我需要添加关闭标签的功能。我创建了一个指令 myCloseTab 并将其应用于 kendoTabTitle 指令内的一个 button 元素，我能够成功地侦听该元素上的点击事件。到目前为止一切顺利。

但是，我看不到如何访问 kendoTabStrip 元素，所以我可以调用 kendoTabStrip.remove(i)，其中 i 是选项卡的索引。我可以从点击侦听器中引用 this.elementRef，但我不认为沿着 DOM 树向上走是理想的 Angular 方法。

Kendo 标签条:

<kendo-tabstrip>
    <kendo-tabstrip-tab
        *ngFor="let tab of tabs"
        [selected]="tab.selected"
        [disabled]="tab.disabled">

        <ng-template kendoTabTitle >
            <span>{{ tab.title }}</span>
            <button myCloseTab></button>
        </ng-template>

        <ng-template kendoTabContent>
            <div>{{ tab.data }</div>
        </ng-template>

    </kendo-tabstrip-tab>
</kendo-tabstrip>

myCloseTab 指令：

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
    selector: '[myCloseTab]'
})
export class CloseTabDirective {

    @HostListener('click', ['$event']) onClick() {
        console.log(this.elementRef);
    }

    constructor(private renderer: Renderer2, private elementRef: ElementRef) {
        this.renderer.addClass(this.elementRef.nativeElement, 'closeIcon');
    }

}

Answer 1

您可以像这样在要访问的元素中进行引用：

<kendo-tabstrip #reference>
<kendo-tabstrip-tab
    *ngFor="let tab of tabs"
    [selected]="tab.selected"
    [disabled]="tab.disabled">

    <ng-template kendoTabTitle >
        <span>{{ tab.title }}</span>
        <button myCloseTab></button>
    </ng-template>

    <ng-template kendoTabContent>
        <div>{{ tab.data }</div>
    </ng-template>

</kendo-tabstrip-tab>

并且您可以通过执行以下操作在 .ts 文件中访问它：

@ViewChild('reference') tabStrip : KendoTabStripConstructor;

然后您将能够访问 tabStrip 对象的方法，包括该删除方法。就我个人而言，我从未使用过 Kendo 但我已经将这种方法与其中一个 primeng 组件一起使用，并且它工作得很好。我刚刚查看了 kendo，我认为它与 primeng 的原理相同，所以这应该适合你。

如何在 Kendo Tabstrip 中使用 Angular 实现关闭标签按钮

How can I implement a close tab button in Kendo Tabstrip with Angular

kendo-ui

kendo-tabstrip

angular