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

Question

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

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

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

我试过了：

 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 元素，就像它没有找到一样。

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

Apply a directive on a DOM element using getElementById in angular 7

angular2-directives

angular

angular-renderer2

angular7