Javascript 将css dom组件转换为html css

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

在这种情况下，第二个内联样式工作并显示为蓝色的h1 但是当我尝试在innerhtml中添加字符串时，就像这样。。。 在my 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) { }

htmlVariable:string=“不工作”
构造器（专用\u httpService:httpService，专用\u路由：
激活路由，
专用路由器：路由器{}

有没有其他方法可以操作css？我找不到一种通过vision.component.css实现的方法，就像我可以通过.html文件中的内部html实现一样

---

感谢您的帮助

您可以使用

自定义管道

实现同样的效果

当您需要将此变量作为

innerHTML

绑定到视图部分时，请使用此管道，您的样式应按预期工作-

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

PS：我假设在使用之前，您必须在主模块中导入管道

有关详细信息，请在此处阅读

您可以在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>

您是否尝试过将组件中的“封装”添加到“ViewEncapsulation.None”中？您好，非常感谢您的帮助，封装确实有效，因为如果我的visual.component.html中已经有一个带有ID的div，我就可以通过visual.component.ts成功地在其上使用样式。当我在visual.component.ts中添加另一个div的innerHTMl追加时，我仍然无法操作css。我相信它给了我一个消毒错误，不管它是否有效！我有点不明白为什么，但当我使用ID的时候，它会清理ID，当它在component.ts之后点击html部分时不会应用它。在我切换到类之后，当我在html中插入div时，它会工作并登录到inspect上，并且清除错误会消失！感谢您为我展示了视图封装感谢您帮助我解决了kunai！，这个解决方案不断给我一个错误，说这种风格不存在。然而，我确实找到了使用ViewEncapsulation的替代解决方案。再次感谢Community y pardeep感谢您帮助我解决此问题我尝试过其他方法，但我认为这会解决使用ID的问题谢谢您的评论！很高兴知道：）

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