读取组件的属性'style'在 mat-tab 内显示"Cannot read property 'style' of undefined"错误消息

Question

>问题

所以我在 fruity.component.html 中有 3 个选项卡，在我的最后一个选项卡上我有一个组件

// fruity.component.html
<mat-tab-group>
<mat-tab></mat-tab>
<mat-tab></mat-tab>
<mat-tab>
<app-banana></app-banana>
</mat-tab>
</mat-tab-group>

// banana.component.html
<div class="bnn" #bnn></div>

在banana.component.ts中，我得到了带有ViewChild和document.getElementsByClassName('bnn'([0]的div，但仍然显示"无法读取未定义的属性'样式'"错误消息。

有没有人对我有同样的问题并解决了问题？

Answer 1

我不确定为什么你通过ViewChild和document查询来访问你的div。我建议您坚持使用Angular工具，而不是与原始JS查询混合使用。

无法访问样式的可能原因是因为您正在尝试访问对象的样式，该样式不反映您的div 而是其他内容。如果您共享您的component.ts代码，我可以更准确，但我认为您的ViewChild输入为ElementRef.如果是这样，则您的表示级别比实际的 dom 引用高一个级别。您需要访问ElementRefnativeElement，并且应该能够检索其样式。

如果检索不同类型的ViewChild(例如任何材料指定的类型(，则需要首先从组件引用中访问ElementRef，然后访问nativeElement，最后访问其样式。

.html

<mat-card #fancyCard>Testing</mat-card>

TS

@ViewChild('fancyCard', {static: true}) myCard: MatCard;
[...]
this.myCard._elementRef.nativeElement.style;

请注意，您可以在ViewChild注释中指定选项，例如read: ElementRef立即访问ElementRef(如果您不想操作组件本身，而只是对其 dom 元素进行引用(。

如果您觉得此答案不符合您的需求，请提供有关您的代码的更多上下文/信息，我将编辑我的答案。

Answer 2

当我选择第三个选项卡时，我使用"set @Input"来触发函数运行一次，而不是使用 ngOnInit((。因为在 Mat Tab 中，ngOnInit(( 函数是在尚未创建组件时执行的。