манипуляция css dom угловой компонент к html-css

Question

У меня проблемы с выполнением манипуляций с dom на angular / node.js / с использованием машинописного текста в моем visualcomponent.html работает

в этом случае второй встроенный стиль работает и отображается с h1 синим цветом но когда я пытаюсь добавить строки в innerhtml, как это ... внутри моего visual.component.ts:

  htmlVariable:string = "<h1 style = 'color:blue; margin- 
    left:30px;'> not working</h1>"
  constructor(private _httpService: HttpService, private _route: 
  ActivatedRoute,
  private _router: Router) { }

Есть ли другой способ манипулировать css? я не мог найти способ сделать это через vision.component.css, как я могу сделать это через внутренний HTML-файл .html спасибо за вашу помощь

Answer 1

Вы можете использовать ElementRef для прямого доступа к элементам DOM в Angular.

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

@Component({
    selector: 'my-app'
})
export class AppComponent implements ngOnInit {

constructor(private _httpService: HttpService, private _route: ActivatedRoute, private _router: Router, private _elementRef : ElementRef) { }

ngOnInit(): void
{
  this.ModifyDOMElement();
}

 ModifyDOMElement() : void
 { 
   let domElement = this._elementRef.nativeElement.querySelector(`#someID`);
   domElement.style.color = "Red"; //Apply CSS Properties here
 } 

}

Ваш HTML:

<h1 id="someID"></h1>

Answer 2

Вы можете добиться того же, используя custom pipe, используя DomSanitizer .

import { Component, NgModule, Pipe, PipeTransform } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform  {

  constructor(private sanitized: DomSanitizer) {}

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

и когда вам нужно, чтобы эта переменная связывалась в части вида, как innerHTML, используйте эту трубу, и ваш стиль должен работать как ожидалось -

<div [innerHTML]="htmlVariable | safeHtml"></div>

PS: я предполагаю, что вы должны импортировать трубу в свой основной модуль перед использованием.

Более подробную информацию вы можете прочитать здесь

• https://angular.io/api/platform-browser/DomSanitizer#members