Angular 最佳实践:为了可重用性，创建新的 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，并且没有数据/事件绑定会与此div交互，这里最好的做法是什么(以及为什么(：

• 新的CSS类，
• 内部含有<ng-content></ng-content>的新角分量，
• 别的？

Answer 1

从我所看到的，我发现最好的解决方案是简单地创建一个CSS类，如下所示：

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

原因：

• K.I.S.S.
• 不会引入额外的 HTML 嵌套，这可能会与 flexbox 之类的东西产生摩擦，因此维护性较差

在我看来，只有在满足以下任一条件时，才应创建角度组件：

• 他们的模板由多个 HTML 元素组成(在问题示例中只有一个(
• 它们利用自定义逻辑，无论是在 TypeScript 还是 angular 模板语法中，例如ngIf

Answer 2

根据您的示例，您可能需要两种做法的组合。

<div class="myBaseStyle">
<ng-content></ng-content>
</div>

你的 css 看起来像这样。

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

由于您想在多个位置重用该div，因此创建组件是一种非常好的做法，因为如果您需要在该特定 DIV 中编辑某些内容，您只需在一个位置而不是每个位置更新它。如果将来您需要向该 DIV 添加更多 html，则必须重新定义整个解决方案。

Answer 3

在角度应用程序的src folder下style.css中，制作如下全局样式：

<div class="flex-container">
<ng-content></ng-content>
</div

.flex-container {
display: flex;
flex-direction: column;
height: 100%;
&.child-element { //like this you can add styles to chuld elements.
...
}
}

通过这种方式，只需复制并粘贴您的 HTML，样式将自动从根目录上的 style.css 应用。

如果要在特定组件中的某处编辑样式，那么无论哪种情况，您都可以将样式从style.css文件中@extend到x.compnent.css您将获得以前的样式，x.compnent.css您可以进一步更改您的方式。

@extend样式的示例：

@extend .flex-container;
display: block;