Angular @Input 以编程方式为 3rd 方控件设置

Question

我正在使用 PrimeNG 控件。我正在通过指令在各种输入控件上设置 disabled 属性，其中一些控件是 p-dropdown、p-listbox 和 p-calendar PrimeNG 控件。基本的输入、文本区域和选择控件工作刚刚找到，但 PrimeNG 控件已禁用定义为 @输入 如下:

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');
        }
    }
}

那么，如何在给定 的情况下禁用 PrimeNG 3rd 方控件ElementRef.nativeElement ?我在想，我需要一种方式来满足残疾人 @输入 给定元素引用的属性。

Answer 1

基本上我不认为使用指令以编程方式禁用控件是一个好主意，我完全建议您使用旧输入来处理它。
但我可以针对您的情况提出以下解决方案:https://stackblitz.com/edit/angular-disable-prime-ng-elements
解决方案本身并不完美 - 但如果您不想使用 disabled，这是一种权衡。输入。

首先，创建一个名为 PrimeNgComponentsChangeDetectorRefDirective 的指令获得公开版本的primeng组件变更检测器来更新他们的观点。您应该手动包含您要处理的所有primeng 组件。这里的技巧是使用相同的选择器来自动匹配primeng 组件。

@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
    );
  }
}

然后，在您的禁用指令中实现以下属性和方法:

  @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 属性对这种变化一无所知。