时间戳

首页 > 解决方案 > Angular @Input 以编程方式为 3rd 方控件设置

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

问题描述

我正在使用PrimeNG控件。我正在通过指令在各种输入控件上设置 disabled 属性，其中一些控件是 p-dropdown、p-listbox 和 p-calendar PrimeNG 控件。基本输入、textarea 和 select 控件可以正常工作，但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.nativeElement的情况下禁用PrimeNG 3rd 方控件？我在想，在给定元素引用的情况下，我需要一种方法来实现禁用的@Input属性。

标签： angulartypescriptdomprimeng

解决方案

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

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

解决方案本身并不完美 - 但如果您不想使用disabled输入，这是一种权衡。

  1. 首先，创建一个指令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
    );
  }
}
  1. 然后，在您的禁用指令中实现以下属性和方法：
  @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 对此更改一无所知。

推荐阅读