Angular 最佳实践：为了可重用性，创建新的 CSS 类或新组件？

Posted 2023-03-06

【中文标题】Angular 最佳实践：为了可重用性，创建新的 CSS 类或新组件？

【英文标题】：Angular best practice: for reusability, make new CSS class or new component?

【发布时间】：2020-01-16 19:44:55

【问题描述】：

我有这个 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> 的新角度组件， 还有别的吗？

【问题讨论】：

不是很清楚你想做什么，但可能是两种做法的结合，你应该做一个 css 来包含你的风格，但我不确定你是否想把 ng-该 div 内的内容。

@DiegoBascans 我做了一些修改，希望现在更清楚了。

【参考方案1】：

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

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

原因：

K.I.S.S. 没有引入额外的 html 嵌套，这可能会导致与 flexbox 之类的东西发生摩擦，因此不易维护

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

他们的模板由多个 html 元素组成（在问题的示例中只有一个） 他们使用自定义逻辑，无论是 TypeScript 还是 Angular 模板语法，例如ngIf

【参考方案2】：

根据您的示例，您可能需要将这两种做法结合起来。

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

你的 CSS 看起来像这样。

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

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

【讨论】：

您能详细说明原因吗？例如，我可以不制作新组件而侥幸逃脱，只需在需要的地方使用 divs 和 myBaseStyle 类。

【参考方案3】：

在你的style.css Angular 应用的src folder 下，做一个像这样的全局样式：

<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 应用。

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

@extend 样式示例：

@extend .flex-container;
  display: block;