是否可以监听组件中的事件并更改本机元素？

Question

我的组件在纯 JS 中使用 class 创建 DOM 元素并通过引用将它们 returns 添加到模板：

@ViewChild ("layersContainer", {static: true}) layersContainer: ElementRef;
<div class = "Layers" #layersContainer> </div>

我将容器的 #layersContainer 引用传递给此 class:

new DomBuilderJs (this.layersContainer);

是否有可能以某种方式监听组件中的更改 DOM 不是由组件构建的？

更准确地说，监听特定元素的悬停并在组件端修改它？

Answer 1

我建议创建选择器指令并使用主机监听器添加事件监听器。一些如下所示

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

@Directive({selector: '[layersContainer]'})
export class LayerContainerSelectorDirective {

  constructor(private elementRef: ElementRef)

  @HostListener('mouseenter') onMouseEnter() {
    this.elementRef.style.color = 'red';
  }
}

是否可以监听组件中的事件并更改本机元素？

Is it possible to listen to an event in a component and change the native element?

angular

angular6

angular8