Angular 7将指令添加到动态生成的HTML

Question

我使用ngx-codemirror，并且想在鼠标输入字符串时显示mat-tooltip。 在AngularJS中完成的方式：

el = angular.element('.cm-string');
el.attr('uib-tooltip', "Tooltip text");
el.attr('tooltip-append-to-body', 'true');
$compile(el)(scope);

是否可以动态地附加[matTooltip]或任何指令？

Answer 1

 import....

 export class AppComponent  { 
   constructor(private injector: Injector) {
     const ourDynamicDiv = document.getElementById('anynewdiv');
     const tooltip: MatTooltip = Injector.create({
        parent: this.injector,
        providers: [
          {
            provide: ElementRef,
            useValue: new ElementRef(ourDynamicDiv)
          },
          {
            provide: MatTooltip,
            useClass: MatTooltip,
            deps: [
              Overlay,
              ElementRef,
              ScrollDispatcher,
              ViewContainerRef,
              NgZone,
              Platform,
              AriaDescriber,
              FocusMonitor,
              MAT_TOOLTIP_SCROLL_STRATEGY,
              Directionality,
              MAT_TOOLTIP_DEFAULT_OPTIONS,
              // HAMMER_LOADER
            ]
          }
        ]
      }).get(MatTooltip);
      tooltip.position = 'above';
      tooltip.message = `message text`;
    }

这会将“材料工具提示”附加到动态添加的元素上。