Kendo PagerInput切换标签后无法保持禁用状态问题求助

我需要实现的效果是：在使用相同组件但不同数据的标签页之间切换时，确保<kendo-pager-input>内部的数字输入框始终处于禁用状态。当前遇到的异常表现：

• 首次加载时，第一个标签页的数字输入框处于禁用状态，符合预期；
• 直接切换到第二个标签页时，数字输入框未被禁用，不符合预期；
• 先返回第一个标签页，再切换到第二个标签页，输入框才会被禁用。

由于<kendo-pager-input>组件未暴露disabled属性，直接设置[disabled]="true"无效，因此我通过自定义指令来实现禁用逻辑，但仍存在上述问题。

相关代码 #

HTML代码 #

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
      <div>
        <kendo-pager-info></kendo-pager-info>
      </div>
      <div class="pagerMiddleItems">
        <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
        <kendo-pager-input kendoPagerDisableInput></kendo-pager-input>
        <kendo-pager-next-buttons [disabled]="loading"></kendo-pager-next-buttons>
      </div>
      <kendo-pager-page-sizes [pageSizes]="pagesizes" cy-data="pageSize"></kendo-pager-page-sizes>
</ng-template>

自定义指令代码 #

import { AfterViewInit, Directive, ElementRef, Renderer2 } from "@angular/core";
import { PagerInputComponent } from "@progress/kendo-angular-grid";

@Directive({
    selector: '[kendoPagerDisableInput]'
})
export class KendoPagerDisableInputDirective implements AfterViewInit {

    constructor(
        private ref : ElementRef,
        private rn : Renderer2,
        private pager: PagerInputComponent
    ) {

    }

    ngAfterViewInit(): void {
        this.disableInput();
    }

    private disableInput() {
        
        if(this.ref && this.ref.nativeElement !== undefined) {
            if(this.pager.numericInput) {
                let input = this.pager.numericInput.numericInput.nativeElement as HTMLInputElement;
                input.disabled = true;
            }
        }
    }
}

问题原因分析 #

指令仅在ngAfterViewInit钩子中执行一次禁用操作，存在两个核心问题：

1. 切换标签页时，新标签页的<kendo-pager-input>内部numericInput可能尚未完全初始化，此时执行disableInput会因找不到目标元素而失败；
2. 标签页切换触发组件重新渲染后，没有重新触发禁用逻辑，导致输入框恢复可编辑状态。

解决方案：监听视图更新，确保禁用逻辑及时执行 #

修改指令，添加视图更新监听与重试机制，确保每次组件渲染完成后都能正确禁用输入框：

import { AfterViewInit, AfterViewChecked, Directive, ElementRef, Renderer2 } from "@angular/core";
import { PagerInputComponent } from "@progress/kendo-angular-grid";

@Directive({
    selector: '[kendoPagerDisableInput]'
})
export class KendoPagerDisableInputDirective implements AfterViewInit, AfterViewChecked {

    private isDisabled = false; // 标记是否已完成禁用，避免重复操作

    constructor(
        private ref: ElementRef,
        private rn: Renderer2,
        private pager: PagerInputComponent
    ) { }

    ngAfterViewInit(): void {
        this.disableInput();
    }

    ngAfterViewChecked(): void {
        // 每次视图检查后，若未禁用则尝试执行逻辑
        if (!this.isDisabled) {
            this.disableInput();
        }
    }

    private disableInput(): void {
        if (this.pager?.numericInput?.numericInput?.nativeElement) {
            const input = this.pager.numericInput.numericInput.nativeElement as HTMLInputElement;
            if (!input.disabled) {
                input.disabled = true;
                this.isDisabled = true;
            }
        } else {
            // 若目标元素未初始化，延迟重试
            setTimeout(() => this.disableInput(), 100);
        }
    }
}

方案说明 #

1. 新增ngAfterViewChecked钩子：确保每次组件视图更新后都检查禁用状态，覆盖标签页切换后的重新渲染场景；
2. 添加isDisabled标记：避免重复执行禁用操作，减少不必要的DOM操作；
3. 延迟重试逻辑：处理组件初始化时序问题，确保numericInput完全加载后再执行禁用。

内容的提问来源于stack exchange，提问作者SomeStudent