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

Question

我在我的项目中使用 Angular 5.2 并且是 angular 框架的新手。我的组件 html 看起来像这样：-

我想在 angular ts 代码中将 style="top:200px;" 动态添加到上面屏幕截图中带有 class="app-alerts" 的突出显示元素。具有 class "app-alerts" 的 div 元素被添加到渲染上的 DOM。

请建议代码更改。

Answer 1

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

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

Answer 2

我来晚了，但是不！不要使用 DOCUMENT.QUERYSELECTOR。那不是你设计 Angular DOM 元素的方式！

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

那么在你的组件中，你有

ngAfterViewInit() {
  this.divStyle = 200; 
}

Answer 3

我发现一个页面有很好的解释和示例代码，可以在 Angular 2+ 中动态添加样式。 Attach the style dynamically in Angular

Answer 4

我有同样的问题，我需要在用户滚动页面时滚动 div，并使用下面的代码解决了我的问题。在您要捕获滚动的组件处：

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

@ViewChild('curtain') divCurtain: ElementRef;

export class ComponentX {
    @HostListener('window:scroll', ['$event']) onScrollEvent($event) {
        console.log(window.pageYOffset);
        this.divCurtain.nativeElement.style.top = window.pageYOffset.toString().concat('px');
    }

    ngOnInit(): void { }
}

仅此而已，我没有创建任何指令或其他代码。每次用户滚动页面时都会执行此 HostListener，我得到 window.pageYOffset 发送到我的 div。

希望对您有所帮助。

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

Angular 5 - add style to specific element dynamically

angular-template

angular

angular5