Question

因此，我想将模板传递给组件，并使用从该组件而不是从调用组件中应用的样式在内部呈现此模板。不用设置ViewEncapsulation.None就能做到吗？

为此，我做了一个小型的堆叠炸弹。我希望param button也呈绿色。

Answer 1

只需尝试一下

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

使用:: ng-deep-sharing-piercing后代组合器强制通过子组件树样式化为所有子对象组件视图。 :: ng-deep组合器可在任何深度的嵌套中工作组件，它适用于视图子级和内容子组件。

编辑： 深度选择器已被弃用很长时间，CSS工作组尚未就替代方法达成共识。直到有我喜欢深度使用的替代方法为止，因为虽然其他解决方案（例如，用div包裹元素和全局样式化）是可行的，但它也有问题，最大的问题是，它不能按角度在模块间工作。由您决定。

Answer 2

我完全不建议使用::ng-deep。它已被弃用，并且将被永久删除。

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

// styles.scss 

  .hello-container button {
      background: green;
   }

// hello.component.ts -> template

<div class="hello-container">
 ...
</div>

OR

更简单：

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

hello button {
      background: green;
    }

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