angular - 我可以通过@HostBinding 之外的其他方式访问主机绑定(bind)吗？

Question

我的根本问题是我需要设置一个异步函数 alters an attribute of the host .由于 @HostBinding 没有异步能力，我在组件上设置了一个实例变量，绑定(bind)它，并手动维护该变量。为了让它在没有臭名昭著的 ExpressionChangedAfterItHasBeenCheckedError 的情况下工作，我需要这样做

@Component(...) 
export class MyComponent implements OnChanges {
  constructor(private readonly cdr: ChangeDetectorRef) {}

  @Input() inputObservable: Observable<boolean>;
  @HostBinding('class.some-class') private setCssClass: boolean;

  ngOnChanges() {
    this.inputObservable.do(v => {
      if (this.setCssClass !== v) {
        setTimeout(() => {
                    this.setCssClass = v;
                    this.cdr.detectChanges();
                  }, 0);
     }
   })
   .subscribe();
  }
}

这太糟糕了。

是否有一些更简洁的方法来告诉父级“这是您的一个变量的新值，您可以随意设置”？

编辑:

而且它甚至不起作用。在特殊情况下，setTimeout 可以在组件被正式销毁后执行，这会导致异常，需要整个“另一个级别的 hacky horribleness 来防止”。

Answer 1

您可以使用 ElementRef 方法简单地选择 Renderer。一旦组件被销毁，不要忘记取消订阅您的 Observable:

@Component(...) 
export class MyComponent implements OnInit, OnDestroy {
  constructor(private element: ElementRef, private renderer: Renderer2) {}

  @Input() 
  public inputObservable: Observable<boolean>;

  private ngUnsubscribe = new Subject<void>()

  ngOnInit() {
    this.inputObservable
      .takeUntil(this.ngUnsubscribe)
      .do(v => this.toggleClass('some-class', v))
      .subscribe()
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  private toggleClass(klass: string, state: boolean) {
    if(!this.element.nativeElement) return;
    if(state) {
      this.renderer.addClass(this.element.nativeElement, klass)
    } else {
      this.renderer.removeClass(this.element.nativeElement, klass)
    }
  }
}

第二种方法是将组件的输入更改为 boolean，然后从父组件输入带有 async-pipe 的 observable:

@Input()
@HostBinding('class.some-class')
public myInput: boolean;

父组件

<my-component [myInput]="myObservable$ | async"></my-component>