NG-SELECT 禁用不使用 Angular 12 的指令

Question

我正在尝试通过指令禁用 ng-select。谁能建议我该怎么做？

这是我的代码，这是示例。我正在尝试。

setTimeout(() => {
  const selectElement = this.elementRef.nativeElement;
  if (this.elementRef.nativeElement.tagName === 'NG-SELECT') {
    console.log('selectElement :', this.elementRef.nativeElement);
    this.renderer.setProperty(selectElement, 'disabled', true);
    this.renderer.setProperty(selectElement, ' ng-select-disabled', '');
    this.renderer.addClass(selectElement, 'disabled');
    const inputEle = this.elementRef.nativeElement.querySelector('input');
    this.renderer.setProperty(inputEle, 'disabled', true);
  }
}, 1000); 

我尝试了很多方法，但我需要用指令来做到这一点有人知道我该如何用指令来做到这一点吗？

• [disabled]="true" => 使用 ngModel
• [readonly]="true" => 使用 formControlName
• 但不能使用指令。

任何人都可以建议我该怎么做吗？

Answer 1

工作堆栈闪电战

只需从构造函数中检索主机组件，因此在这里

NgSelectComponent

并使用方法

setDisabledState

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

@Directive({
  selector: '[appCurrencySelect]',
})
export class CurrencySelectDirective {
  constructor(private elementRef: ElementRef, private el: NgSelectComponent) {
    setTimeout(() => {
      const selectElement = this.elementRef.nativeElement;
      if (selectElement.nativeElement.tagName === 'NG-SELECT') {
        this.el.setDisabledState(true);
      }
    }, 1000);
  }

  ngAfterViewInit() {}
}