Angular 5 - 动态地为特定元素添加样式

Question

我在我的项目中使用Angular 5.2并且是角度框架的新手.我的组件html看起来像这样: -

我想添加style ="top:200px;" 在角度ts代码的上述屏幕截图中,使用class ="app-alerts"动态地突出显示突出显示的元素.具有"app-alerts"类的div元素被添加到渲染上的DOM中.

请建议代码更改.

Answer 1

我参加这个派对已经很晚了,但不!不要使用DOCUMENT.QUERYSELECTOR.这不是你如何设置Angular DOM元素的样式!

<div [ngStyle]="{'top.px': divStyle}">

然后在你的组件中,你有

ngAfterViewInit() {
  this.divStyle = 200; 
}

Answer 2

根据我们的评论,您应该document.querySelector在生命周期钩子之后使用

ngAfterViewInit() {
    (document.querySelector('.app-alerts') as HTMLElement).style.top = '150px';
}