angular - 如何使用 MatTabChangeEvent 获取内容

Question

我通过指令和事件读取选项卡菜单。我得到了正确的索引，很可能是正确的元素。现在我想为 ElementRef 设置动画以便能够对其进行动画处理，但我找不到它。它不是 templateRef 也不是 origin。有人可以告诉我如何找到当前元素以及在更改选项卡时如何修复它吗？

下面的代码是一个简单的颜色更改示例，看看我是否有正确的元素；我的最终目标是能够通过将内容 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