如何将样式应用于 Angular 中的自定义组件内容？

Posted 2023-03-06

【中文标题】如何将样式应用于 Angular 中的自定义组件内容？

【英文标题】：How to apply Style to custom component content in Angular?

【发布时间】：2019-11-03 03:12:02

【问题描述】：

我正在尝试将样式应用于自定义组件的子组件。

选择器：

<custom-component-example></custom-component-example>

custom-component-example.html 内部：

<button>
    <ng-content></ng-content>
</button>

如果我要使用这样的风格：

<custom-component-example style="color: green">some text</custom-component-example>

或者像这样：

<custom-component-example [ngStyle]="'color': green">some text</custom-component-example>

按钮文本不会变绿。样式可以是任何东西（例如字体粗细或大小或任何东西）。

我也试过这个话题的解决方案：

Best way to pass styling to a component

但这也不适用于子元素（上例中的按钮）。

如何传递任何给定的样式并将其应用于子元素，在示例的情况下，我将如何传递样式（通过 custom-component-example 选择器）并将其应用于按钮和按钮的文本?

提前致谢。

【问题讨论】：

由于它是 Angular 2+，每个自定义组件都应该在定义时分配一个 CSS 文件或内联样式。这些样式可能是静态的。为什么我们要在运行时注入它？

我猜，Angular 2+ 中的每个组件都应该是独立的。

我认为这两种方法都没有问题，您能否检查一下，从样式到按钮的位置，样式可能存在重量/优先级问题。当您编写样式属性时，它独立于 angular/javascript。它只是 HTML 和 CSS

【参考方案1】：

你不应该改变父级的子样式，而是你应该做的：

将一个类应用到父级（比如说绿色按钮）。 在孩子的 css 中，您需要检查我的父母是否有一个类绿色按钮，如果是，那么它应该改变它的颜色。

在孩子的css文件中->

:host-context(.green-button) button
color : green

您不应该将样式从父级转移到子级，因为它破坏了 Angular 引以为豪的 ViewEncapsulation 优点。 这里有一些参考。 ：Link

此外，子组件应该负责按钮的外观。父母应该关心自己。将来，如果您将有两个孩子给您的父母，将很难管理将哪种风格传给哪个孩子。 使用这种方法，改变风格不仅容易，而且易于管理。

如果我能提供帮助，请点赞并标记为已解决。干杯。

【讨论】：

您好，我使用了您的解决方案来解决我的问题。效果很好，我也尝试了其他一些解决方案，但我无法让它们正常工作。也欣赏解释。

【参考方案2】：

您需要使用@Input() 之类的方式将样式属性传递给子组件

您的子组件 HTML 代码应如下所示

<div [className]="tableCss">
</div>

你的子组件 ts 文件代码应该是这样的

@Input() tableCss: string;

你的父组件应该看起来像

<app-list [tableCss]="'table-responsive table-borderless table-grid mt-4 border-top border-primary'"></app-list>

【参考方案3】：

尝试将styles改成[styles]

custom-component-example.html

<button [ngStyle]="styles">
    <ng-content></ng-content>
</button>

custom-component-example.ts

@Input() styles: any = ;

使用，

<custom-component-example [styles]="color: green">some text</custom-component-example>

【参考方案4】：

如果您想使用输入和样式而不像这样对 css 进行深度选择：

a > b > c 
    color: green;

把这个类改成这个：

class CustomComponentExample 
    @Input() styles;

为此输入设置样式：

<custom-component-example [styles]="'color': green">some text</custom-component-example>

在你的组件中使用这个属性：

<button [ngStyle]="styles">
    <ng-content></ng-content>
</button>