angular - 如何在组件内设置模板样式

Question

所以，我想将一个模板传递给组件，并在内部使用从该组件应用的样式呈现该模板，而不是从调用组件。有什么方法可以在不设置的情况下做到这一点ViewEncapsulation.None？

为此，我做了一个小的 stackblitz。我param button也想要呈现绿色。

score 2 · Accepted Answer

我不建议使用::ng-deep。它已被弃用，并会及时被永久删除。

我更改了您的代码并div为您的 HelloComponent 添加了一个容器。使用该 div 上的类，您可以控制组件内的样式。您在主style.css文件中编写的任何样式都不需要::ng-deep或ViewEncapsulation.None.

// styles.scss 

  .hello-container button {
      background: green;
   }

// hello.component.ts -> template

<div class="hello-container">
 ...
</div>

或者

更简单：

您不需要容器div，只需将其添加到您的style.css

hello button {
      background: green;
    }

'hello' 是组件的选择器，它将将该样式应用于组件中的每个按钮。

score 1 · Accepted Answer

试试这个

  styles: [`
   ::ng-deep button {
       background: green;
    }
  `]

使用 ::ng-deep 穿透阴影的后代组合器将样式强制通过子组件树向下进入所有子组件视图。::ng-deep 组合器适用于任何深度的嵌套组件，它适用于组件的视图子项和内容子项。

编辑： 这个深度选择器已经被弃用了很长时间，CSS 工作组还没有就替代方案达成一致。直到有一个我喜欢使用 deep 的替代品，因为虽然替代解决方案（例如用 div 包装元素和全局样式化）很好，但它也有问题，最大的问题是它在 Angular 模块间不起作用. 由您决定。

2 回答 2