Angular — как получить доступ к элементу html при использовании ViewEncapsulation.Native

Самый простой способ получить доступ к HTML-элементу — использовать Angulars ElementRef. Подробнее об этом можно прочитать здесь. Пожалуйста, используйте это с осторожностью! Ниже приведен пример того, как использовать его в вашем случае:

В вашем app.component.html

<div #myelement>This is Pink</div>

В вашем app.component.ts

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myelement') el: ElementRef;

  ngAfterViewInit() {
    this.el.nativeElement.classList.add("myclass");
  }
}

В вашем app.component.css

.myclass {
    color: pink;
    font-weight: bold;
}

ИЗМЕНИТЬ:

Для чистого стиля, как уже упоминал @SnorreDan, было бы лучше использовать директиву Angulars [ngClass] . Вы можете посмотреть, как это сделать, на следующем примере:

В вашем app.component.html

<div [ngClass]="myColorClass">This may change color!</div>

<button (click)="makePink()">Pink</button>
<button (click)="makeGreen()">Green</button>

В вашем app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myColorClass: string

  makePink() {
    this.myColorClass = 'pink';
  }

  makeGreen() {
    this.myColorClass = 'green';
  }
}

В вашем app.component.css

.pink {
    color: pink;
    font-weight: bold;
}

.green {
    color: green;
    font-weight: bold;
}

Надеюсь, это поможет!

Я думаю, вы задаете два разных вопроса:

<сильный>1. Как вы динамически добавляете и удаляете классы в Angular:

В Angular вы должны стараться избегать прямого использования документа. Хороший способ добавить класс на основе условия — использовать директиву ngClass, подробнее об этом можно прочитать здесь: https://angular.io/guide/template-syntax#ngclass

Другой способ динамического добавления класса — это захват элемента из шаблона с помощью ViewChild, а затем установка класса для элемента с помощью angular Renderer (вы найдете больше информации, если погуглите)

<сильный>2. Как сделать так, чтобы мой компонент не наследовал глобальный CSS из файла Angular.json

Я не могу придумать решение для этого. Использование стратегий инкапсуляции, таких как ViewEncapsulation.None и ViewEncapsulation.Emulated, не решит эту проблему, поскольку они влияют только на классы в этом компоненте, не распространяясь на другие компоненты. Это не влияет на глобальные классы, входящие в этот компонент.