Angular - 自定义弹出 html

Question

我正在尝试实现一些我必须在单击按钮时打开一个弹出窗口的东西，可以有多个按钮具有自己的叠加弹出窗口，并且在单击弹出窗口外部时它们应该关闭。现在我正在使用 TemplateRef （在我的情况下为#toggleButton） 打开它们，但它只在一个按钮上工作，即第一个按钮，它同时打开所有弹出窗口。任何帮助将不胜感激。

我正在附加 stackblitz 链接，https://stackblitz.com/edit/angular-d8tnwg?file=src/app/app.component.ts

HTML：

<ng-container>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="showTooltip()"></button>
                    <div #menu class="overlay-text" [ngClass]="status ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button  class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="showTooltip()"></button>
                    <div #menu class="overlay-text" style="background-color: yellow" [ngClass]="status ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button  class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="showTooltip()"></button>
                    <div #menu class="overlay-text" style="background-color: red" [ngClass]="status ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
        </ng-container>

TS：

status: boolean = false;
  @ViewChild("toggleButton") toggleButton: QueryList<ElementRef>;
  @ViewChild("menu") menu: QueryList<ElementRef>;

  constructor(private renderer: Renderer2) {
    this.renderer.listen("window", "click", (e: Event) => {
      console.log("click outside");
      if (
        e.target !== this.toggleButton.nativeElement &&
        e.target !== this.menu.nativeElement
      ) {
        this.status = false;
      }
    });
  }

  showTooltip() {
    this.status = !this.status;
  }
}

Answer 1

只有第一个按钮有效，因为您的 id 不是唯一的，解决方法是：@ViewChild(Button) toggleButton: QueryList<ElementRef> 但正如 rmjoia 评论的那样 - 实现您想要的正确方法是为每个按钮制作唯一的 ID 和唯一的工具提示切换

Answer 2

以下是一种可能的解决方案，我并不是说这是最好的或唯一的解决方案，在编程中，通常有不止一种解决方案，并且每种解决方案都有其权衡。

我做了功能切换，但如果你愿意，你可以设置一个为真，弹出按钮设置为假...天空甚至不是极限；）

StackBlitz example forked from yours

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  isTooltip1Visible = false;
  isTooltip2Visible = false;
  isTooltip3Visible = false;

  constructor() {}

  toggleTooltip(tooltipId) {
    switch (tooltipId) {
      case 1:
        this.isTooltip1Visible = !this.isTooltip1Visible;
        break;
      case 2:
        this.isTooltip2Visible = !this.isTooltip2Visible;
        break;
      case 3:
        this.isTooltip3Visible = !this.isTooltip3Visible;
        break;
      default:
        console.log("Invalid tooltip Id");
        break;
    }
  }
}

app.component.html

<table appClickOutside (clickOutside)="closeDropdown()">
    <tbody>
        <ng-container>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="toggleTooltip(1)"></button>
                    <div #menu class="overlay-text" [ngClass]="isTooltip1Visible ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button (click)="toggleTooltip(1)" class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="toggleTooltip(2)"></button>
                    <div #menu class="overlay-text" style="background-color: yellow"
                        [ngClass]="isTooltip2Visible ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button (click)="toggleTooltip(2)" class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="custom-td" style="overflow:visible;">
                    <button #toggleButton class="icon-info" (click)="toggleTooltip(3)"></button>
                    <div #menu class="overlay-text" style="background-color: red"
                        [ngClass]="isTooltip3Visible ? 'open' : ''">
                        <p>This is a placeholder text and will be copied
                            if you click on button!</p>
                        <div class="form-group">
                            <input type="text">
                            <button (click)="toggleTooltip(3)" class="icon-filecopy"></button>
                        </div>

                    </div>
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>