将指令应用于动态生成的html

Question

如果我没有正确解释，请忽略，实际上我是Angular 6的新手，并且有一个创建的指令，如下所示：

import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';

@Directive({
  selector: '.pvtVal'
})
export class PWDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {
    console.log(this.el);
    console.log(this.renderer);
  }

 @HostListener('mouseenter') onMouseEnter() {
    console.log(this.el);
 }
}

我正在使用一些逻辑来遵循div生成动态表：

<div id="table123" style="width: 100%; height: 100%;">
</div>

生成html的组件如下：

export class PWComponent implements OnInit {
   ngOnInit() {
     this.generateHtml();
   }
   generateHtml(){
      // @ts-ignore
      const targetDiv = $('#table123')
       targetDiv.html(/*generate html logic*/);
   } 
}

在我的动态html中，我有一些带有pvtVal类的标签，但是它不起作用，我在做什么错了？