有没有一种方法可以将模板引用添加到生成的html元素中，并在ng-template内附加hostlistener

Question

我正在使用ngx-bootstrap创建可重用，可调整大小的模式组件。模态内容，当使用模态服务时由ng-template生成。我正在使用模式服务，而不是指令，因此可以从父组件打开模式的单个实例。我一直在尝试使用Renderer2来访问元素，但是我无法向动态添加的元素添加模板ref。有更好的方法来解决这个问题吗？

第二，我正在使用原始JS将句柄元素附加到DOM，但是@Hostlistener不会拾取事件，并且我还没有找到将（click）属性附加到dom元素的方法。

open() {

    //   [style.minWidth.px]="minWidth" [style.left.px]="left" [style.top.px]="top"
    this.modalRef = this.modalService.show(this.resizeableModal, Object.assign({}, { class: this.customClassName }));
    document.getElementsByClassName(this.customClassName)[0].setAttribute('id', 'modalDialogue');
    document.getElementById('modalDialogue').children[0].setAttribute('id', 'modalRoot');
    this.modalRoot = document.getElementById('modalRoot');
    this.appendUIHandles();
  }

  appendUIHandles() {
    const classNames = ['ui-resizable-s',
      'ui-resizable-e',
      'ui-resizable-se',
      'ui-resizable-w',
      'ui-resizable-sw'
    ];

    for (let i = 0; i < classNames.length; i++) {
      const node = document.createElement('DIV');
      node.setAttribute('id', classNames[i]);
      this.modalRoot.appendChild(node);
    }
    this.renderer.listen(this.renderer.selectRootElement('#ui-resizable-s'), 'click', (evt) => {
      console.log('Clicking the button', evt);
    });
    this.addStylesToUIHandles();
  }

  addStylesToUIHandles() {
    const classNames = ['ui-resizable-s',
      'ui-resizable-e',
      'ui-resizable-se',
      'ui-resizable-w',
      'ui-resizable-sw'
    ];

    for (let i = 0; i < classNames.length; i++) {
      const node = document.getElementById(classNames[i]);
      if (classNames[i] === 'ui-resizable-s') {
        node.setAttribute('style', 'position: absolute; cursor: e-resize; height: 100%; width: 7px; right: 0px; top: 0;');
        node.addEventListener('click', () => this.initResizeS());
      }
      if (classNames[i] === 'ui-resizable-e') {
        node.setAttribute('style', ' position:absolute; cursor: e-resize; height: 100%; width: 7px; right: 0px; top: 0;');
        node.addEventListener('drag', (event) => this.initResizeE(event));
      }
      if (classNames[i] === 'ui-resizable-se') {
        node.setAttribute('style', 'position:absolute; cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0;');
        node.addEventListener('drag', (event) => this.initResizeSE(event));

      }
      if (classNames[i] === 'ui-resizable-w') {
        node.setAttribute('style', 'position:absolute; cursor: w-resize; height: 100%; width: 7px; left: 0px; top: 0');
        node.addEventListener('drag', (event) => this.initResizeW(event));
      }
      if (classNames[i] === 'ui-resizable-sw') {
        node.setAttribute('style', 'position: absolute; cursor: sw-resize; height: 15px; width: 15px; left: 0; bottom: 0;');
        node.addEventListener('drag', (event) => this.initResizeSW(event));
      }
    }
  }

  public hide() {
    this.modalService.hide(0);
  }


  @HostListener('mousemove', ['$event'])
  onMousemove(event): void {
    console.log('in')
    this.onDrag(event);
    this.onResize(event);
  }