javascript - 宿主元素的条件样式

Question

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

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

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

该组件有一个 isChanged 属性，我想根据该 isChanged 属性在宿主元素上应用样式。这可能吗？

Answer 1

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

@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 的回答:

• ngClass in host property of component decorator does not work