如何在Angular组件中为@HostBinding设置条件判断？

你遇到的问题是因为直接将@HostBinding绑定到@Input属性时，当属性值为空或undefined，Angular会直接把宿主元素的innerHTML设为空，导致内容被清空。可以通过以下两种方式解决：

方法一：使用Getter控制绑定值 #

将@HostBinding绑定到一个getter属性，仅当mainvalue有效时返回对应值，否则返回undefined（Angular会忽略undefined的绑定更新，不会修改原有innerHTML）：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: '<p>组件原有内容</p>'
})
export class YourComponent {
  @Input() mainvalue: string | undefined;

  @HostBinding('innerHTML')
  get innerHtmlBinding(): string | undefined {
    // 仅当mainvalue不为空、null、undefined时返回，否则返回undefined
    return this.mainvalue && this.mainvalue.trim() ? this.mainvalue : undefined;
  }
}

方法二：使用Setter过滤无效值 #

通过@Input的setter方法，仅在mainvalue有效时更新内部绑定属性，避免无效值触发innerHTML清空：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: '<p>组件原有内容</p>'
})
export class YourComponent {
  private _innerHtml?: string;

  @Input() set mainvalue(value: string | undefined) {
    // 过滤空字符串、null、undefined
    if (value != null && value.trim() !== '') {
      this._innerHtml = value;
    }
  }

  @HostBinding('innerHTML')
  get innerHtmlBinding(): string | undefined {
    return this._innerHtml;
  }
}

两种方法的核心逻辑都是仅在输入值有效时才触发@HostBinding的更新，避免无效值导致宿主元素内容被清空。

内容的提问来源于stack exchange，提问作者wiki