Question

我只有一个组成部分

my.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() {
  }
}

my.component.css

.hello{
color:red;
}

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

现在其他组件看不到该类了：（

Angular中是否有某种解决方案？

Answer 1

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

无表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这基本上与将组件的样式粘贴到HTML中相同。

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

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

Answer 2

将CSS添加到app.component.css或style.css中。它将影响整个应用程序。

Answer 3

如果您希望从其他组件访问组件css样式，则解决方案是view encapsulation。

示例：

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

  constructor() { }

  ngOnInit() {
  }
}

Angular内置了视图封装，这使我们能够使用Shadow DOM甚至进行仿真，因此 ViewEncapsulation.None 所做的就是删除Shadow DOM，因此不会进行样式封装

在组件中应用CSS类，将影响整个CSS角度6

3 个答案: