如何在组件中设置@HostBinding条件？

Question

我只想为特定条件设置@HostBinding。假设我在角度组件中声明了 @HostBinding，如下所示

@Input() @HostBinding('innerHTML') mainvalue;

如果 mainvalue 为空或未定义，那么我们如何停止主机绑定工作？目前，如果 mainvalue 为空或未定义，则组件的全部内容将被删除。

提前致谢。

Answer 1

在输入上使用 setter 有条件地设置或保留 innerHTML 主机绑定：

@Component({
  selector: 'app-test',
  template: '',
})
export class TestComponent {

  @Input() set mainValue (value: any) {
    if (value) {
      this.innerHTML = JSON.stringify(value, null, 2);
    }
    // otherwise keep the current innerHTML
  }

  @HostBinding('innerHTML') innerHTML;
}

Answer 2

ngIf 指令仅在定义了 mainvalue 并且不为空时有条件地应用主机绑定。

<ng-container *ngIf="mainvalue">
  @Input() @HostBinding('innerHTML') mainvalue;
</ng-container>