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

Question

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

然而，我没有看到如何访问该元素上的 kendoTabStrip 元素，这样我就可以调用 kendoTabStrip.remove(i)，其中 i 是标签的索引。我可以引用 this.elementRef 从点击监听器，但我不认为沿着DOM树向上走是理想的Angular方法。

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