如何在 Angular 中使用 @Hostbinding 设置动态组件的样式？答案

【问题标题】：How do I use @Hostbinding in Angular to style a dynamic component?如何在 Angular 中使用 @Hostbinding 设置动态组件的样式？
【发布时间】：2021-07-07 16:30:09
【问题描述】：

我目前正在开发一个 Angular 项目，该项目创建了一堆动态组件，我希望每个组件都有不同的颜色，这取决于它在初始化时调用服务的结果。组件代码如下：

@Component({
  selector: 'app-step',
  templateUrl: './step.component.html',
  styleUrls: ['./step.component.css'],
  providers: [DisplayService, MessageService]
})
export class StepComponent implements OnInit {

//a bunch of other functions and a constructor

findSolutions(defect: Defect): void {
    //this is where I make the call to the service
    this.defectService.getSolutions(defect, this.displayService).subscribe(solutions => {
      if(solutions[0] === undefined) {
          //HERE I want to change the back-ground color of .boxed (element 
          //in the style file) to yellow
        }
        else if(solutions !== undefined) {
          //HERE I want to change the back-ground color of .boxed to green
        }
    });
  }

ngOnInit(): void {
    this.findSolutions(this.defect);
  }
}

谁能帮我弄清楚如何使用 HostBinding？

【问题讨论】：

为什么不使用 NgClass 来添加或删除依赖于组件属性 bool 或 value 的类？
@DarrenStreet 哦，是的，那行得通。如果你想提交它作为答案，我会给它支票，这样你就可以获得它的声誉lol

标签： html css angular typescript angular2-hostbinding

【解决方案1】：

为什么不使用 NgClass 来添加或删除依赖于组件属性 bool 或 value 的类？

【讨论】：