Angular@Input以编程方式为第三方控件设置

Question

我正在使用PrimeNG控件。我通过指令在各种输入控件上设置禁用属性，其中一些控件是p-dropdown、p-listbox和p-calendar PrimeNG控件。基本输入、文本区域和选择控件可以直接找到，但PrimeNG控件已禁用，定义为@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');
}
}
}

那么，在给定ElementRef.natureElement的情况下，如何禁用PrimeNG第三方控件？我在想，我需要一种方法来实现给定元素引用的disabled@Input属性。

Answer 1

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

但我可以针对您的情况提出以下解决方案：https://stackblitz.com/edit/angular-disable-prime-ng-elements

解决方案本身并不完美，但如果您不想使用disabled输入，则需要进行权衡。

1. 首先，创建一个名为PrimeNgComponentsChangeDetectorRefDirective的指令，以获取启动组件的更改检测器的公共版本，从而更新它们的视图。您应该手动包含所有要处理的原始组件。这里的技巧是使用相同的选择器来自动匹配原始组件

@Directive({
selector: 'p-checkbox, p-dropdown, p-listbox'
})
export class PrimeNgComponentsChangeDetectorRefDirective {
public hostComponent: Checkbox | Dropdown | Listbox;
constructor(
public cdr: ChangeDetectorRef,
@Optional() private checkbox: Checkbox,
@Optional() private dropdown: Dropdown,
@Optional() private listbox: Listbox
) {}
ngAfterViewInit() {
this.hostComponent = this.getHostComponent();
}
private getHostComponent() {
return [this.checkbox, this.dropdown, this.listbox].find(
component => !!component
);
}
}

2. 然后，在禁用指令中实现以下属性和方法：

@ContentChildren(PrimeNgComponentsChangeDetectorRefDirective)
private componentsQuery: QueryList<
PrimeNgComponentsChangeDetectorRefDirective
>;
disablePrimeNgComponents() {
const components = this.componentsQuery.toArray();
components.forEach(component => {
component.hostComponent.disabled = true;
component.cdr.detectChanges();
});
}

我们需要手动detectChanges，因为我们已经通过编程更改了disabled属性，而angular对此更改一无所知。