css - 在将影响整个 css angular 6 的组件中应用 css 类

Question

我只有一个组件

我的.component.ts它有自己的 CSS，就像这样

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class NotificationComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

我的.component.css

.hello{
color:red;
}

问题是我想使用该类在 html 的整个元素中可见，我知道我可以将它们全局放置，但我想从组件中使用它。

现在其他组件看不到那个类:(

Angular 中有某种解决方案吗？

Answer 1

请查看 View Encapsulation 上的文档，尤其是在“无”部分:

None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

将其应用于组件装饰器配置对象:

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None // <-- This
})