在 Angular 中，子组件不理解父组件的 CSS

Question

在 Angular 17 中，我有一个 div 类

wrapper-my

.wrapper-my {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch
  width: 100%
}

.my-class {
  width: inherit;
}

// parent component
<div class="wrapper-my">
    <input type="text" class="my-class">
    <app-input-my></app-input-my>
</div>

在

app-input-my

我有一个输入。

.my-class2 {
  width: inherit
}
<input type="text" class="my-class2">

不在组件中的输入填充整个空间。

但是，

app-input-my

中的输入并没有填满整个空间

即使这样做了，仍然不起作用。

<app-input-my class="my-class"></app-input-my>

如何让我的组件根据父标签正确工作？

Answer 1

有效的是

::ng-deep

文档

它已被“弃用”多年。

来自文档：

以下示例针对所有元素，从宿主元素向下通过此组件再到 DOM 中的所有子元素。

:host ::ng-deep h3 {
  font-style: italic;
}

Answer 2

Angular 填充 css 类来模拟视图封装（有点像 ShadowDom）。

要使您的父样式适用于您的子组件，您必须：

• 让你的风格全球化
• 在父级上使用

  ViewEncapsulation.None

  。

 

@Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class WrapperParentComponent { }