如何使用MatTabChangeEvent获取内容

Question

我通过指令和事件阅读选项卡菜单。我得到正确的索引，最有可能获得正确的元素。现在，我想对ElementRef进行动画处理，以便对其进行动画处理，但是我找不到它。它不是templateRef也不是起源。有人可以告诉我更改标签后如何找到当前元素以及如何修复它吗？

下面的代码是一个简单的颜色更改示例，以查看我是否具有正确的元素；我的最终目标是能够通过淡出内容1并淡出动画中的内容2来对内容进行动画处理。

@HostListener('selectedTabChange', ['$event']) selectedTabChange(event: MatTabChangeEvent) {

    console.log('Change Tab', event);


    this.renderer.setStyle(event.tab.content.templateRef.elementRef.nativeElement, 'background-color', 'red');


}

Answer 1

我正在努力寻找一种方法来获取MatTab内容主体的html参考并操纵样式。在这种情况下，我建议您探索HTML类型标签解决方案，这样您就可以完全控制该功能，而不是尝试覆盖MatTab组件。

https://www.w3schools.com/howto/howto_js_tabs.asp