javascript - css dom 操作 Angular 组件到 html-css

Question

我在使用 visualcomponent.html 中的 typescript 对 angular/node.js/进行 dom 操作时遇到问题 工作

在这种情况下，第二个内联样式起作用并显示为蓝色的 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用于直接访问 Angular 中的 DOM 元素。

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>