Javascript 如何清晰地设置Angular 2+；组件，以便它们可以作为柔性项目使用？

在Angular应用程序中，我定义了如下组件模板：

<div class="myComponent">
  <div class="myComponent__header"></div>
  <div class="myComponent__body"></div>
</div>

.myComponent {
  flex-basis: 50%;
}

对于我的SCS：

:host {
  flex-basis: 50%;
}

问题：使用

：host

而不是实际的CSS类会让人感觉不舒服。也许不是？但我想问观众

解决方案2：向宿主元素动态添加一个类 问题：这感觉像是一个大问题。像使用静态CSS类名这样通用的东西应该在HTML中控制，而不是在JS中

解决方案3：在宿主元素上声明类

问题：不喜欢将组件声明为属性。我可以打破规则，但要确保我没有遗漏一个重要的概念

太长，读不下去了 我可能想得太多了，但我对角度不太熟悉，我真的想了解角度做事的方式

（a）通过（b）使用类来设置宿主元素样式的最佳方法是什么？或者这不是一种有棱角的方式™, 如果没有，原因是什么

---

编辑：一位同事指出，像

flex basis

这样的规则可能不应该首先在组件的根上定义，而应该在父组件上定义。因此，我担心的可能是这些用例从未真正出现过。

Angular建议使用多种方法向Angular组件添加类。

1） 使用主机属性

@Component({
  ...
  host: { class: "first-class" }
})

2） 使用主机绑定

@HostBinding（'class'）class='second-class'

3） 使用渲染器2

 constructor(private renderer:Renderer2,private elementRef:ElementRef) { 
    this.renderer.addClass(this.elementRef.nativeElement,"third-class");
  }


您可以全局定义样式，无需禁用视图封装。
您试图解决的问题是什么？这读起来像是抱怨不得不自己做决定。你有什么特别的困难吗？你是对的，是我在担心自己做决定。但我认为这是一个值得关注的问题，因为使用框架的优点之一是它减少了一个人自己做决定的数量。如果我发现自己需要就这样的通用/基本问题做出决定，那么我怀疑我没有正确地使用框架。
:host {
  flex-basis: 50%;
}

constructor(
  hostElement: ElementRef,
) {
  this.hostElement.nativeElement.classList.add('myComponent');
}

<div style="display: flex">
  <app-my-component *ngFor="let item in list" class="myComponent"></app-my-component>
</div>

@Component({
  select: ['my-component']
})

<div my-component *ngFor="let item in list"></div>

@Component({
  ...
  host: { class: "first-class" }
})

 constructor(private renderer:Renderer2,private elementRef:ElementRef) { 
    this.renderer.addClass(this.elementRef.nativeElement,"third-class");
  }