使用角度7中的getElementById在DOM元素上应用指令

Question

我有一些由第三方生成的HTML（情节），我很乐意在我们创建的一个DOM元素上应用我们已经拥有的指令。

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

我可以用querySelector或getElementById到达元素，但是如何将它转换/包装成angular可以添加指令？

我试过了：

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

要么：

const comp = this.renderer.selectRootElement(el)

但comp没有出现帮助

Answer 1

如果生成了这个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);
    }
}

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

@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元素，就像它没有。