angular - 如何以 Angular 创建弹出组件？

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

问题是:

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

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

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

我不确定如何解决上述两个问题。如果有人可以提供建议，那就太好了。

Answer 1

自 ng-template正在编译以进行评论，您实际上无法获取其内容。您可以尝试将其设置为隐藏的 div，这可能会起作用( https://stackblitz.com/edit/angular-bj2ke4 )。

在任何情况下，我都对 API 进行了一些小的更改，因此它会与以下模式匹配(我希望这对您没问题):

<app-popover buttonText="Click Me">
  <ul>
    <li>THIS</li>
    <li>IS</li>
    <li>MY POPOVER</li>
  </ul>
</app-popover>

很简单，popover.component.ts :

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

@Component({
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.css']
})
export class PopoverComponent {

  @Input() buttonText: string;
  isActive = false;

  toggle() {
    this.isActive = !this.isActive;
  }

}

popover.component.html :

<button (click)="toggle()">{{ buttonText }}</button>

<div class="popover" [class.active]="isActive">
  <ng-content></ng-content>
</div>

Stackblitz 演示 - https://stackblitz.com/edit/angular-ovecbp