2

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

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

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

我试过：

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

或者：

const comp = this.renderer.selectRootElement(el)

但comp没有出现帮助

4

1 回答 1

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

于 2019-03-18T15:31:51.923 回答