使用一次单击事件的多个弹出窗口在Angular中重复了几次

Question

我的问题可能很容易解决，但是我刚刚开始学习Angular，并且不知道它的外观。我的组件之一在其.html文件中包含四个a标签，如下所示：

<a href="" (click)="doAfterClick()"></a>
...
...
<a href="" (click)="doAfterClick()"></a>

我在此组件的.ts文件中的代码包含“ doAfterClick（）”方法，该方法将打开带有一些文本消息的弹出窗口。这个想法很简单：根据我们单击的链接，我们将在弹出窗口中看到另一条消息，例如。我们带有消息的数组位于第二个组件的.ts文件中，如下所示：

messages = ["Message1", "Message2", "Message3", "Message4"];

[当我们单击第一个链接时，弹出窗口应包含“ Message1”，单击第二个-我们将看到带有“ Message2”的弹出窗口。

在第二个组件的.html文件中，我创建了一个段落，其中应包含来自“ messages”数组的消息：

<p *ngFor="let message of messages; let i = index"> {{}} </p>

如何将我的doAfterClick（）方法与消息数组连接以在弹出窗口中仅显示一条（正确的）文本消息？

Answer 1

您可以执行类似的操作：

doAfterClick(index: number): void {
    return this.messages[index];
}