如何使用Angular在剑道Tabstrip中实现关闭tab按钮

我有一个

kendo tabstrip

，我需要添加关闭选项卡的功能。我创建了一个指令

myCloseTab

，并将其应用于

kendoTabTitle

指令中的

按钮

元素，并且我能够成功地侦听该元素上的单击事件。到目前为止还不错

但是，我不知道如何访问

kendotastrip

元素，以便调用

kendotastrip.remove（I）

，其中

I

是选项卡的索引。我可以从click listener中引用

this.elementRef

，但我不认为沿着DOM树走是理想的方法

剑道标签：

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

---

您可以在要访问的元素中创建引用，如下所示：

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

然后，您将能够访问tabStrip对象的方法，包括remove方法。就我个人而言，我从来没有使用剑道，但我已经在其中一个打底组件上使用了这种方法，而且效果很好。我只是查了一下剑道，我认为这和打底的原理是一样的，所以这对你来说应该是可行的

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

@ViewChild('reference') tabStrip : KendoTabStripConstructor;