如何在角度 8 中获取选定选项卡的 id 和元素引用

Question

我正在尝试获取选定选项卡的元素引用，但无法正常工作。我不知道为什么会这样。实际上我想获取选定选项卡元素引用名称，例如第一个选项卡元素引用是 tab1，所以如果我单击第一个选项卡，我想获取它的选项卡 ID 和元素引用。 例如，如果我单击第一个选项卡警报应为“此选项卡 ID 为 =mytab1 且元素引用为 = tab1”

怎么做？如果有人知道，请帮助找到解决方案。

app.component.html：

    <my-tabs (selectedTabClick)="test($event)">
      <my-tab [tabTitle]="'Tab 1'"  id="mytab1" #tab1>
        Tab 1 content
      </my-tab>
      <my-tab tabTitle="Tab 2" id="mytab2" #tab2>
        Tab 2 content
      </my-tab>
    </my-tabs>

演示：https://stackblitz.com/edit/angular-tabs-example-egszd2?file=app/app.component.html

Answer 1

在app.component.ts里面，把test的方法改成如下：

test(event): void {
    console.log(event.data);
    alert("This tab id is " + event.data.id + " and element reference is " + event.data);
}