如何在 Angular 中使用 @Hostbinding 來設置動態組件的樣式？

Question

我目前正在開發一個 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 嗎？

Answer 1

為什么不使用 NgClass 添加或刪除依賴於組件屬性 bool 或值的類？