Angular 以编程方式为第三方控件设置角度@输入集

我正在使用启动控件。我通过指令在各种输入控件上设置disabled属性，其中一些控件是p-dropdown、p-listbox和p-calendar priming控件。基本输入、文本区域和选择控件只需查找即可工作，但启动控件的禁用定义为@input，如下所示：

private _disabled: boolean;

@Input() get disabled(): boolean {
    return this._disabled;
};

/*
** find all inputs and disable them.
*/
disableElements( el: ElementRef ): void {
    const controls = el.nativeElement.querySelectorAll( 'input, select, textarea, p-dropdown, p-listbox, p-checkbox' );
    controls.forEach( (elmt: any) => {
        this.disableElement( elmt );
    });
}
/*
** disable an input element.
*/
disableElement( elmt: any ): void {
    if( elmt.localName.substr(0,2) === 'p-' ) {
        this._renderer.setProperty(elmt, 'disabled', 'true');
    } else {
        if(!elmt.hasAttribute('disabled')) {
            this._renderer.setAttribute(elmt, 'disabled', 'true');
        }
    }
}

指令的代码片段如下所示：

private _disabled: boolean;

@Input() get disabled(): boolean {
    return this._disabled;
};

/*
** find all inputs and disable them.
*/
disableElements( el: ElementRef ): void {
    const controls = el.nativeElement.querySelectorAll( 'input, select, textarea, p-dropdown, p-listbox, p-checkbox' );
    controls.forEach( (elmt: any) => {
        this.disableElement( elmt );
    });
}
/*
** disable an input element.
*/
disableElement( elmt: any ): void {
    if( elmt.localName.substr(0,2) === 'p-' ) {
        this._renderer.setProperty(elmt, 'disabled', 'true');
    } else {
        if(!elmt.hasAttribute('disabled')) {
            this._renderer.setAttribute(elmt, 'disabled', 'true');
        }
    }
}

---

那么，如果给定一个ElementRef.nativeElement，如何禁用正在启动的第三方控件呢？我在想，我需要一种方法来实现给定元素引用的disabled@Input属性。

基本上，我不认为使用指令以编程方式禁用控件是个好主意，我完全建议您使用好的旧输入来处理它

但我可以针对您的情况提出以下解决方案：

解决方案本身并不完美——但如果您不想使用

禁用的
输入，这是一个折衷方案

首先，创建一个名为
PrimeNgComponentsChangeDetectorRefDirective
的指令，以获取primeng组件更改检测器的公共版本，以更新其视图。您应该手动包含所有要处理的预涂组件。这里的技巧是使用相同的选择器来自动匹配打底组件
然后，在禁用指令中实现以下属性和方法：
@ContentChildren（PrimeNgComponentsChangeDetectorRefDirective）
私有组件库：QueryList<
PrimengComponentSchangeDetectorRef指令
>;
disablePrimeNgComponents（）{
const components=this.componentsQuery.toArray（）；
组件。forEach（组件=>{
component.hostComponent.disabled=true；
component.cdr.detectChanges（）；
});
}

我们需要手动
检测更改
，因为我们以编程方式更改了
禁用了
属性，angular对此更改一无所知。
对不起，您有什么问题？那么，如何在给定ElementRef.nativeElement的情况下禁用正在启动的第三方控件？谢谢您现在可以禁用任何输入了。。或获得任何错误，我可以禁用输入、选择和文本区域。我无法禁用p-dropdown、p-listbox和p-calendar.Brilliant。不喜欢setTimeout，将hostComponent更改为getter并返回getHostComponent。是的，setTimeout只是为了检查解决方案是否正常工作。Lint对上面的选择器“p-checkbox，p-dropdown，p-listbox”不满意，指出选择器应该用作属性（）