Примените директиву к элементу DOM, используя getElementById в angular 7 - PullRequest
Новая
       24

Примените директиву к элементу DOM, используя getElementById в angular 7

2 голосов
/ 18 марта 2019

У меня есть некоторый HTML-код, сгенерированный третьей стороной (сюжетно), и я хотел бы применить указание, которое у нас уже есть, к одному из создаваемых им элементов DOM.

Директива открывает colorPicker при щелчкеи устанавливает цвета в строки.

Я могу добраться до элемента с помощью querySelector или getElementById, но как я могу преобразовать / обернуть его в угловой, можно добавить директиву для?

Я пытался: 

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

или: 

const comp = this.renderer.selectRootElement(el)

, но comp не помогал

1 Ответ

1 голос
/ 18 марта 2019

Если этот 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, как это не делает.

...