角度指令-动态创建组件并包装内容

问题描述

我想要什么：

实际可行的简约工具提示-看着您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.2),0 4px 5px 0 rgba(0,0.14),0 1px 10px 0 rgba(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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）