有条件地将 class 应用到组件主机

Question

我正在尝试将 class 应用于组件标签，仅当某些情况为真时。

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

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

})

Answer 1

您可以使用 @HostBinding:

有条件地设置宿主元素 class

condition: boolean = true;

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

或特定的 class 名称（例如 redBorder）：

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

查看这两个演示：stackblitz 1, stackblitz 2。

Answer 2

如果 'my-class' 是一个 class 名称，您可以这样设置它

@Component({
  selector: 'k-sidebar',
  host: {
   '[class.my-class]': 'isChanged'
 },
 templateUrl: './ng-k-side-bar.component.html',
 encapsulation: ViewEncapsulation.None
})
export class MyComponent {
  isChanged = true;
}

有条件地将 class 应用到组件主机

Apply class conditionally to component host

angular-components

angular