如何在角度中创建弹出框组件？

Question

我想创建一个popover具有如下 api 的组件：

<button  popover [content]="popover_content" >popover test</button>

<ng-template #popover_content>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</ng-template>

我已经尝试了一定程度，请参阅stackblitz

问题是：

1. 内容出现在按钮内。我该如何避免呢？

2. 我希望内容给它一些 css 类，但是当我访问它时，我只得到一个注释节点。

      @Input() set content(val: TemplateRef<void>) {
        this.popoverContent = val;
        console.log(val.elementRef.nativeElement);//this is a comment node. WHY??
      }

我不知道如何解决以上两个问题。如果有人能提供建议那就太好了。

Answer 1

您可以查看我在Stackblitz中所做的更改。

添加了 mouseOver 事件，但也可以在 onClick 上完成

<div ngClass="myclass" (mouseenter)="changeStyle($event)" (mouseleave)="changeStyle($event)">
  <ng-content></ng-content>

 <div *ngIf = "test">
 <ng-container *ngTemplateOutlet="popoverContent"
  ></ng-container>
 </div> 
</div>