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

【问题标题】：Angular 7 add directives to dynamically generated htmlAngular 7 将指令添加到动态生成的 html
【发布时间】：2019-08-01 21:36:14
【问题描述】：

我使用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] 或任何指令？

【问题讨论】：

没有。 Angular 已编译，这意味着添加编译后的指令将不起作用。

标签： angular dynamic angular-directive

【解决方案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`;
    }

这会将材质工具提示附加到动态添加的元素。

【讨论】：