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

您可以看看我在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>

Answer 2

由于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

Answer 3

如果使用离子性离子，则可以使用其ion-popover组分。否则，您可以尝试使用纯CSS路由。

要使用基本的弹出框，您需要一个带有position: absolute的背景层以及一个 top z-index。为了方便起见，可以使用height: 100%和width: 100%。它会覆盖整个屏幕。

<section class="popover-background">
  ...
</section>

然后，您需要为弹出窗口创建可见容器，例如popover-background上的模式。您可以根据需要放置该容器，它将成为可见的popover元素。此容器将相对于绝对位置popover-background。

<section class="popover-background">
  <article class="popover-container">
    <!-- popover content -->
  </article>
</section>

现在，您可以将所需的任何内容放入容器中。

<section class="popover-background">
  <article class="popover-container">
    <ng-content></ng-content>
  </article>
</section>

假定此弹出窗口属于my-popover组件。您可以选择像这样显示弹出窗口的内容：

<button (click)="showPopver()">Show Popover</button>

<my-popover *ngIf="show">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</my-popover>

此外，您可以进一步修改这段代码以包含动态弹出窗口内容。

<my-popover *ngIf="show">
  <a *ngIf="showA"></a>
  <b *ngIf="showB"></b>
</my-popover>

如何创建有角的弹出框组件？

3 个答案: