angular - 有条件地将类应用于组件主机

Question

我尝试仅在某些情况为真时才将类应用于组件标签。

我如何才能将此主机变成条件主机，以便在需要时应用所需的类？

@Component({
  selector: 'k-sidebar',
  host: {
   class: '{{isChanged}}'
 },
 templateUrl: './ng-k-side-bar.component.html',
 encapsulation: ViewEncapsulation.None

})

Answer 1

您可以使用 @HostBinding 有条件地设置宿主元素类:

condition: boolean = true;

@HostBinding("class") private get hostClass(): string {
  return this.condition ? "redBorder" : "";
}

或者对于特定的类名(例如redBorder):

@HostBinding("class.redBorder") private get hasRedBorder(): boolean {
  return this.condition;
}

查看以下两个演示:stackblitz 1 , stackblitz 2 .