[解決済み] AngularでKendo Tabstripのタブを閉じるボタンを実装する方法

質問

を持っています。 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');
    }

}

解決方法は？

このように、アクセスしたい要素で参照を作ることができます。

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

を実行すると、remove メソッドを含む tabStrip オブジェクトのメソッドにアクセスできるようになります。個人的にはKendoを使ったことはないのですが、すでにprimengのコンポーネントの一つでこの方法を使い、うまくいっています。この方法は、primengのコンポーネントで使用したことがありますが、うまくいきました。