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

根据我们的评论，您应该在生命周期挂钩后使用@Component public class Receiver { private static final Logger LOGGER = LoggerFactory.getLogger(Receiver.class); @Autowired private KafkaListenerEndpointRegistry kafkaListenerEndpointRegistry; public void testlag() { for (MessageListenerContainer messageListenerContainer : kafkaListenerEndpointRegistry .getListenerContainers()) { Map<String, Map<MetricName, ? extends Metric>> metrics = messageListenerContainer.metrics(); metrics.forEach( (clientid, metricMap) ->{ System.out.println("------------------------For client id : "+clientid); metricMap.forEach((metricName,metricValue)->{ //if(metricName.name().contains("lag")) System.out.println("------------Metric name: "+metricName.name()+"-----------Metric value: "+metricValue.metricValue()); }); }); } }

document.querySelector

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才能发送到我的div。

我希望这会有所帮助。