1

我正在寻找一种方法来获取disabled投影的属性<ng-content> input。因为能够相应地更改宿主元素的行为。

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

此外，我不认为重复condition作为@Inputfor是一个好主意<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 的方式完成？

4

0 回答 0