宿主元素上的条件样式 [英] Conditional styling on host element

问题描述

我有一个组件，它所做的就是渲染，它是这样的:

I have a component that all it does is render , its something like this:

@Component({
     selector: 'my-comp',
     host: ???,
     template: `
         <ng-content></ng-content>
     `
})

 export default class MyComp {
   @Input() title: string;
   public isChanged: boolean;
 }

该组件具有 isChanged 属性，我想基于该 isChanged 属性在宿主元素上应用样式.这有可能吗?

The component has a isChanged property and I want to apply styling on the host element based on that isChanged property. Is this even possible?

推荐答案

为此您使用 class 和 style 前缀.这是一个示例:

You use the class and style prefix for this. Here is a sample:

@Component({
  selector: 'my-comp',
  host: {
    '[class.className]': 'isChanged'
  },
  template: `
    <ng-content></ng-content>
  `
})
export default class MyComp {
  @Input() title: string;
  public isChanged: boolean;
}

有关更多详细信息，请参见Günter的答案:

See the Günter's answer for more details:

• ngng在组件装饰器的host属性中不起作用工作

这篇关于宿主元素上的条件样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！