html - Angular 最佳实践 : for reusability, 制作新的 CSS 类或新组件？

Question

我有这个 div 和一组 CSS 属性(属性本身并不重要，它们只是示例)，它们是我的应用程序的核心，我将在多个页面和其他组件中大量重复使用它们。

<div style="display: flex; flex-direction: column; height: 100%">
//here there will be some inner html that will vary based on the context it's being used in
</div>

鉴于这是如此简单的 html，并且没有数据/事件绑定(bind)会与此 div 交互，这里最好的做法是什么(以及为什么):

• 新的 CSS 类，
• 包含 <ng-content></ng-content> 的新 Angular 组件里面，
• 还有别的吗？

Answer 1

据我所知，我认为最好的解决方案是简单地创建一个 CSS 类，如下所示:

div.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

原因:

• K.I.S.S.
• 不引入额外的 html 嵌套，这会导致与 flexbox 之类的东西产生冲突，因此不易维护

在我看来，仅当满足以下任一条件时才应创建 Angular 组件:

• 他们的模板由多个html元素组成(在问题的例子中只有一个)
• 他们利用 TypeScript 或 Angular 模板语法中的自定义逻辑，例如ngIf