angular: наблюдать отключенный атрибут проецируемого ввода

Я ищу способ получить disabled атрибут проектируемого с <ng-content> input. За возможность соответствующим образом изменить поведение ведущего элемента.

    <host-cmp>
      <input type="checkbox" [(ngModel)]="value" [disabled]="condition">
    </host-cmp>

Кроме того, я не думаю, что это хорошая идея повторять condition как @Input за <host-cmp>, даже если это значительно облегчит жизнь...

The solution I've ended up with (so far, searching a lot...) is the following:

  1. Create a directive for input, get attribute with MutationObserver
  2. Grab this directive with @ContentChild inside the host.
// in <host-cmp>

@ContentChild(InputRefDirective, {static: false}) input: InputRefDirective;

get disabled() {
  return this.input.disabled;
}


// InputRefDirective

@Directive({
  selector: 'input[type=checkbox]'
})
export class InputRefDirective implements OnDestroy {
  public disabled: boolean;
  private observer: MutationObserver;

  constructor(private el: ElementRef) {
    this.observer = new MutationObserver(([record]) =>
      this.disabled = (record.target as HTMLInputElement).disabled);
    this.observer.observe(this.el.nativeElement, {
      attributeFilter: ['disabled'],
      childList: false,
      subtree: false
    });
  }

  ngOnDestroy(): void {
    this.observer.disconnect();
  }
}

It works perfectly fine, but I have doubts... Isn't it too "heavy" for the task like this? Maybe, I've missed something and this could be done in a more Angular-ish way?

0 ответов

Другие вопросы по тегам