html - Angular 指令 - 动态创建组件和包装内容

Question

我想要的是：

简约的工具提示，实际上有效 - 看着你 PrimeNG

我有的：

import {Component, Input} from '@angular/core';

@Component({
  selector: 'lib-tooltip',
  template: '<div class="tooltip-parent">
               <ng-content></ng-content>
               <div class="tooltip">
                 {{label}}
               </div>
             </div>',
  styles: ['
  .tooltip-parent {
    position: relative;
    
    .tooltip {
      display: none;
      position: absolute;
      font-size: smaller;
      z-index: 1014;
      background: rgb(73, 80, 87, 0.8);
      color: #ffffff;
      padding: 0.5rem 0.5rem;
      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
      border-radius: 3px;
  }

  &:hover {
    .tooltip {
      display: block;
    }
  }
}
'],
})
export class TooltipComponent {
  @Input() label: string;
}

我可以这样使用：

<lib-tooltip label="this as tooltip">
  <li>Should have tooltip</li>
</lib-tooltip>

接下来是什么？

我想要一个指令，即。<li customtooltip [tooltiplabel]="this as tooltip">Should have tooltip</li> 动态生成工具提示组件（ViewContainerRef.createComponent() 或者可能是 createEmbeddedView??） - 我知道如何设置两者，但我无法将任何 html 内容（无论我希望我的工具提示应用于什么）到我的 ng - 内容出口

<div class="tooltip-parent">
  <ng-content></ng-content>    <--------- 
    <div class="tooltip">
      {{label}}
    </div>
</div>

标签： htmlangularcomponentsangular2-ngcontent