如何考虑样式化 AngularJS 组件？

Posted 2023-02-23

【中文标题】如何考虑样式化 AngularJS 组件？

【英文标题】：How to think about styling AngularJS components?

【发布时间】：2019-03-14 15:44:44

【问题描述】：

我正在开发一个 AngularJS 项目，目的是慢慢地为 Angular 6 或我们开始升级时发布的任何版本做好准备。其中一项重要工作是将现有指令转换为组件。

我最苦恼的事情是，组件的每个实例都会在 DOM 中引入一个额外的元素，该元素包装了我的实际组件 html 并破坏了层次结构，这使得编写能够满足其需要的 CSS 变得非常困难到。

为了说明我的困境，想象一个名为alert 的简单组件，它为您希望用户注意的各种类型的消息提供样式。它接受两个绑定，一个message 和一个type。根据type，我们将添加一些特殊样式，并可能显示不同的图标。所有的显示逻辑都应该封装在组件中，所以使用它的人只需要确保他们正确地传递数据并且它会工作。

<alert message="someCtrl.someVal" type="someCtrl.someVal"></alert>

选项 A：将样式放在额外元素内的 <div> 上

组件模板

<div
    class="alert"
    ng-class="'alert--success': alert.type === 'success', 'alert--error': alert.type === 'error'">
    <div class="alert__message">alert.message</div>
    <a class="alert__close" ng-click="alert.close()">
</div>

萨斯

.alert 

    & + & 
        margin-top: 1rem; // this will be ignored
    

    &--success 
        background-color: green; // this will work
    

    &--error 
        background-color: red; // this will work
    

只要组件完全不了解它周围的一切，它就可以正常工作，但是当你想将它放在 flex-parent 中，或者使用像“+”这样的选择器时，它就会中断。

选项 B：尝试直接设置额外元素的样式

组件模板

<div class="alert__message">alert.message</div>
<a class="alert__close" ng-click="alert.close()">

萨斯

alert 

    & + & 
        margin-top: 1rem; // this will work now
    

    .alert--success 
        background-color: green; // nowhere to put this
    

    .alert--error 
        background-color: red; // nowhere to put this
    

现在我遇到了相反的问题，因为我无法为成功和错误状态附加修饰符类。

我在这里遗漏了什么吗？处理这个超出组件本身范围的附加元素的最佳方法是什么？

【问题讨论】：

所以问题是您的同级选择器将无法工作，因为您最终会得到像<alert><div class='alert'></div></alert> 这样的结构？或者这只是许多样式问题的一个例子？

兄弟姐妹就是一个例子。另一个不好的问题是，如果组件是 flex-child，它将破坏 flex-tree 并根据应用的 flex 属性导致所有不同类型的布局问题。

会在你的组件上使用transclude: true吗？这将使<alert></alert> 元素完全替换为组件模板的内容。

【参考方案1】：

我个人选择选项 A。这使您可以轻松识别和创建组件的特定样式，而不必担心它们会覆盖站点范围的样式。例如，我将使用嵌套样式来完成此操作：

#componentContainer 
    input[type=text] 
        background-color: red;
    

这将允许您为组件创建通用样式，而不会溢出到解决方案的其余部分。