在 Angular 7 中使用 getElementById 在 DOM 元素上应用指令

我有一些由第三方（plotly）生成的 HTML，我很想在它创建的 DOM 元素之一上应用我们已有的指令。

该指令在单击时打开一个 colorPicker 并将颜色设置为字符串。

我可以通过以下方式到达元素querySelector, or getElementById，但是我如何转换/包装它以便我可以添加一个指示?

I tried:

 const el = document.getElementById('myEl');
 const comp = new ElementRef(el)

or:

const comp = this.renderer.selectRootElement(el)

but comp没有提供帮助

如果生成了此 HTML，我建议为此库添加一个包装器组件。在里面，您可以用一个 DIV 包装您要放置生成的 HTML 的位置，并在该包装上添加您的指令。

像这样的东西：

@Component({
    selector: 'lib-wrapper',
    template: '<div myDirective><div #placeholder></div></div>',
})
export class LibWrapperComponent {
    @ViewChild('placeholder')
    placeholder: ElementRef<HTMLElement>;

    ngAfterViewInit() {
        myLibrary.doStuffOnElement(this.placeholder.nativeElement);
    }
}

Edit:如果您的指令完成了您需要的所有操作，但您的问题是需要将其绑定到的元素嵌套得很深，则可以使用选择器将输入添加到指令中：

@Directive({
  selector: 'clickListener',
})
export class ClickListener {
  @Input()
  clickListenerSelector = '';

  constructor(
    @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
  ) {}

  @HostListener('click', ['$event.target'])
  onClick(target: HTMLElement) {
    if (this.host.contains(target) {
       // Do your logic here
    }
  }

  private get host(): HTMLElement {
    return !this.clickListenerSelector
      ? this.elementRef.nativeElement
      : (this.elementRef.nativeElement.querySelector(this.clickListenerSelector) || this.elementRef.nativeElement);
  }

}

这样您就可以将指令添加到包装元素并将选择器传递给它。如果您没有传递选择器，它将像现在一样工作，如果选择器没有找到任何内容，它也会使用其 ElementRef 元素，就像它没有找到的那样。