如何使用Angular在Kendo Tabstrip中实现关闭选项卡按钮

Question

我有一个kendo-tabstrip，我需要添加关闭标签的能力。我创建了一个指令myCloseTab并将其应用于kendoTabTitle指令中的button元素，并且能够成功侦听该元素上的单击事件。到目前一切尚好。

但是，我不知道如何访问kendoTabStrip元素才能调用kendoTabStrip.remove(i)，其中i是选项卡的索引。我可以从单击侦听器引用this.elementRef，但我不认为在DOM树上遍历是理想的角度方法。

剑道TabStrip：

<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对象的方法，包括remove方法。就我个人而言，我从来没有使用过Kendo，但我已经在一个primeng组件上使用了这种方法，它工作得很好。我刚刚看了一下剑道，我认为它的原理和primeng是一样的，所以这对你来说应该是有效的。