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

【问题标题】：How to apply Style to custom component content in Angular?如何将样式应用于 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>

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

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

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

如何传递任何给定的样式并将其应用于子元素，在示例的情况下，我将如何传递样式（通过 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>

【讨论】：