angular: наблюдение за прогнозируемым вводом отключено - PullRequest
Новая
       15

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

0 голосов
/ 26 апреля 2020

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

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

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

Решение, с которым я в итоге (до сих пор много искал ...) следующее:

  1. Создать директиву для ввода, Получить атрибут с MutationObserver
  2. Получить эту директиву с @ContentChild внутри хоста. 
// 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();
  }
}

Она прекрасно работает, но у меня есть сомнения ... Не это слишком "тяжело" для такой задачи? Может быть, я что-то упустил, и это можно сделать более Angular -i sh способом?

...