Question

我已经习惯了React方法，我基本上可以在任何地方注入任何东西。

我在Angular中有一个愚蠢的Button或app-button组件。它是内联块（:host类），因此其宽度取决于内容。在这种情况下，我无法覆盖其display: block或设置宽度等参数。我可以通过为每个参数（@Input，[display]添加新的[width]来手动执行此操作，但这并不是很好。

我想要的行为是这个组件的输入/指令，为子组件内部提供一个显式注入类。

在React中，我只需添加类名称的prop，并指定它或传递一些内联样式，具体取决于我正在使用的样式系统。

有没有办法/ lib / util来处理这个问题？

Answer 1

由于Angular的ViewEncapsulation，你不能像React那样做。

您最好的选择是直接设置按钮:host元素的样式。这样，您可以使用父组件中定义的类覆盖它。

应用-button.component.ts

import { Component, Input } from '@angular/core'; @Component({ selector: 'app-button', template: ` I am red by default `, styles: [` :host { background-color: red; } `] }) export class ButtonComponent {}

<强> app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <app-button class="button"></app-button> `, styles: [ `.button { background-color: blue; } ` ] }) export class AppComponent {}

Live demo

Answer 2

您不应该为父组件中的子组件元素编写CSS规则，因为Angular组件是一个独立的实体，应明确声明可供外部使用的内容。如果将来子布局发生更改，散布在其他组件的SCSS文件中的该子组件元素的样式可能会轻易中断，从而使您的样式非常脆弱。对于CSS，这就是ViewEncapsulation的目的。否则，如果您可以将值分配给面向对象编程中任何其他类的某个类的私有字段，则将是相同的。

因此，您应该做的是定义一组可以应用于子级宿主元素的类，并实现子级对它们的响应。

从技术上讲，可以按照以下步骤进行操作：

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

换句话说，您使用Angular + CSS类集提供的:host伪选择器在子组件本身中定义可能的子样式。然后，您可以通过将预定义的类应用于<child>宿主元素来从外部触发这些样式。

Answer 3

今天还有其他几种可能性：

：主机上下文（.some-class-name）这使您可以对某些外部类做出反应

:: ng-deep css-expression {xx} 这样，您可以在父级中定义一个班级，该班级可以在其子级中使用。

示例：

parent.component.html

<app-button class="theme-blue"> my button </app-button>

button.component.css

:host-context(.theme-blue) button {
   background-color: blue;
}

不妨查看这份非常好的指南： https://alligator.io/angular/styles-between-components-angular/

将类传递给子组件主机

3 个答案: