在 Angular 中显示/隐藏切换答案

【问题标题】：show/hide toggle in Angular在 Angular 中显示/隐藏切换
【发布时间】：2022-01-07 11:21:31
【问题描述】：

我的 html 页面中有 4 张卡片，我需要在点击功能上显示 mattooltip 以在 Angular 中显示/隐藏 mattooltip。我在所有工具提示中都调用了相同的方法，但它只显示第一个 mattooltip 数据。

app.component.html：

<div class="card-body">
<div class="ml-auto p-2 pointer"
                     matTooltip="Here you can see the one"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i class="info-icon" ></i>
                </div> 
 </div> 
 <div class="card-body">
 <div class="ml-auto p-2 pointer"
                     matTooltip="Here you can see the two"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i class="info-icon" ></i>
                </div> 
 </div> 
 <div class="card-body">
 <div class="ml-auto p-2 pointer"
                     matTooltip="Here you can see the three"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i class="info-icon" ></i>
                </div> 
 </div> 
 <div class="card-body">
 <div class="ml-auto p-2 pointer"
                     matTooltip="Here you can see the four"
                     matTooltipPosition="above" (click)="toggleShowTooltip()">
                  <i class="info-icon" ></i>
                </div> 
 </div>

app.component.ts：

  @ViewChild(MatTooltip) tooltip: MatTooltip;
   toggleShowTooltip(): void {
   this.tooltip.show();
   }

谢谢。

【问题讨论】：

嗨@Aruna，但你应该首先展示你的“尝试”，或者至少说出你对你的功能有什么具体疑问。
当我点击第四个工具提示时，它应该显示第四个工具提示数据。
您可以尝试类似我的卡片这一点都不优雅……但你明白了。为了让它与 ViewChildren 一起使用，您需要使用...嗯，ViewChildren 而不是 VIewChild。或者 id 你的 div 并使用多个 ViewChild。
我在下面留下了一个可能对你有用的回复。由于我看到您是这里的新贡献者，请在回答正确时将其标记为正确，以感谢并为帮助过的人提供帮助。

标签： angular angular-material

【解决方案1】：

在这种情况下您不能使用 ViewChild，因为它与您预期的不一样，还有 4 个工具提示。

更简单的方法是使用 Angular 模板引用。

    <div #tooltip="matTooltip" matTooltip="Text here" (click)="tooltip.toggle()">
       <i class="info-icon"></i>
    </div>

此外，您可以调用一个方法并传递对它的引用，然后从 TS 调用切换或任何其他进一步的操作，如 (click)="toggleShowTooltip(tooltip)" 并在代码中添加参数及其类型以使用它。

文档中的进一步参考/示例： https://material.angular.io/components/tooltip/examples#tooltip-manual

【讨论】：