Question

是否可以将您自己的指令添加到现有的ag-grid的IHeaderComponent并修改标头的内容/行为？

我创建了自己的IHeaderComponent并将其用于ag-grid，但是在标头中添加我自己的指令时遇到了困难。他们网站上的所有TS示例也无济于事，因为我坚持使用angular 1.6。另外，由于我无法使用IHeaderComponent，因此将依赖项传递给IHeaderAngularComponent的正确方法是什么。

有什么建议吗？

编辑：我的第一个选项是，如何通过我的依赖项，这很难看，不知道这是否是正确的方法。

class MyHeader {
    /**
     * @implements {IHeaderComp}
     */

    constructor() {
        if (!MyHeader.injector) {
            MyHeader.injector = angular.element('[ng-app=myApp]').injector();
        }
        this.injector = MyHeader.injector;

        this.dependencies = ['$log'];
    }
    /**
     * @param {IHeaderCompParams} params
     */
    init(params) {
        this.params = params;
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = '<span class="ag-header-cell-text" ref="eText" role="columnheader"></span>';

        this.eText = this.eGui.querySelector(".ag-header-cell-text");
        this.eText.textContent = params.displayName;

        this.initAngular();
    }

    initAngular() {
        this.dependencies = _.compact(this.dependencies);
        this.dependencies.forEach(dep => this[dep] = this.injector.get(dep));
    }

    getGui() {
        return this.eGui;
    }

    destroy() {
        if (this.params.enableSorting) {
            this.eGui.removeEventListener('click', this.sortRequestListener);
            this.params.column.removeEventListener('sortChanged', this.onSortChangedListener);
        }
    }

    onSortRequested(event) {
        if (this.params.enableSorting) {
            //...
        }
    }

    onSortChanged() {
        if (this.params.enableSorting) {
            //...
        }
    }

    initSorting() {
        if (this.params.enableSorting) {
            //...
        }
    }
}

Answer 1

您是否已查看自定义headerComponent的官方演示？

根据您的代码，要处理click，hover或任何其他event，您需要定义一个listener。您正在使用dispose处理removeEventListener，这很好，但是subscription在哪里？

因此，例如，您需要在初始化 step 上附加：

let youHeader = this.eGui.querySelector(".ag-header-cell-text");
youHeader.addEventListener('click', this.youCustomClickHandler);

youCustomClickHandler(){
    ... your logic here
}

您可以在初始化 step 上指定您的enable\disable条件（不完全在function内部）

ag-grid的IHeaderComponent中的angularjs指令？

1 个答案: