如何将 templateRef 传递给指令？

Question

我正在尝试以角度创建自定义工具提示指令，我想将 templateRef 作为输入属性从父组件传递给该指令，但 templateRef.elementRef 返回的是注释而不是模板内容。

指令：

@Directive({
  selector: '[tooltip]'
})
export class tooltipDirective {
  @Input('tooltip') tooltip: ElementRef<any>;
  @Input('placement') placement: string = 'bottom';

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

父组件：

<div [tooltip]="tooltipTemplate"> show tooltip </div>

<ng-template #tooltipTemplate>
  <div class="tooltip">
    tooltip text
  </div>
</ng-template>

如何获取实际内容？

Answer 1

你可以在getter中使用，但要小心，模板是TemplateRef。如果你想添加它，在构造函数中注入viewContainerRef，有些像：

  _tooltip:TemplateRef<any>
  @Input('tooltip') set tooltip(value)
  {
    this._tooltip=value
    this.viewContainer.createEmbeddedView(this._tooltip)
  }
  @Input('placement') placement: string = 'bottom';

  constructor(private viewContainer:ViewContainerRef) {}

更新：关于this.viewContainer.createEmbeddedView(this._tooltip)的使用，我们一般会做一些赞

    const embeddedViewRef = this.viewContainer.createEmbeddedView( this._tooltip );
    embeddedViewRef.detectChanges(); //<--this makes that if our template
                                     //has a variable and change, the tooltip
                                     //take account this change

然后，为了制作一个工具，我们可以使用Renderer2创建一个div，并将embeddedViewRef的所有节点添加到该div中

  const div = this.renderer.createElement("span");
  embeddedViewRef.rootNodes.forEach(n => {
    this.renderer.appendChild(div, n);
  });

辛苦的工作是计算位置，创建类工具提示并添加两个 HostListener 用于 mouseout 和 mouseover