在組件中應用CSS類，將影響整個CSS角度6

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的文檔，尤其是“無”部分：

None表示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樣式可從其他組件訪問，則解決方案是視圖封裝 。

范例：

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所要做的就是刪除Shadow DOM，因此不會進行樣式封裝