读取组件的 属性 'style' inside mat-tab show "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 中，我得到 div with ViewChild 和 document.getElementsByClassName('bnn')[0] 但仍然显示 "Cannot read property 'style' of undefined" 错误消息。

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

Answer 1

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

您无法访问样式的可能原因是因为您正在尝试访问一个对象的样式，该对象 不是 反映您的 div 而是其他东西。如果您分享您的 component.ts 代码，我会更准确，但我认为您的 ViewChild 键入为 ElementRef。如果是这样，您的代表水平比实际 dom 参考高一级。您需要访问 ElementRef 的 nativeElement 并且您应该能够检索其样式。

如果您检索不同类型的 ViewChild - 例如任何 Material 指定类型 - 您需要先从组件引用中访问 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()函数是在组件还没有创建的时候执行的。