时间戳

首页 > 解决方案 > 在将影响整个 css 角度 6 的组件中应用 css 类

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

问题描述

我有一个组件

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

我的.component.css

.hello{
color:red;
}

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

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

Angular中有某种解决方案吗？

标签： cssangularsass

解决方案

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

None 意味着 Angular 没有视图封装。Angular 将 CSS 添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这本质上与将组件的样式粘贴到 HTML 中相同。

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

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

推荐阅读