Примените класс 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

Пожалуйста, ознакомьтесь с документацией Просмотр инкапсуляции , особенно в части "Нет":

Нет означает, что Angular не выполняет инкапсуляцию вида.Angular добавляет CSS к глобальным стилям.Обсуждаемые ранее правила определения границ, изоляции и защиты не применяются.По сути это то же самое, что и вставка стилей компонента в HTML.

Примените его к объекту конфигурации декораторов компонента:

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

Answer 2

Если вы хотите, чтобы стиль вашего компонента 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 сделает, удалит теневой DOM, поэтому не будет инкапсуляции стиля

Answer 3

Добавьте вашу CSS к app.component.css или style.css.Это повлияет на все приложение.