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，但仍显示“无法读取未定义的属性'style'”错误消息。

有人与我有相同的问题并解决了该问题吗？

Answer 1

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

您无法访问样式的可能原因是，您尝试访问的对象的样式不反映了您的div，但又反映了其他内容。如果您共享自己的component.ts代码，我可能会更精确一些，但是我认为您的ViewChild键入为ElementRef。如果是这样，那么您的代表水平要比实际dom参考高。您需要访问nativeElement中的ElementRef，并且应该能够检索其样式。

如果您检索不同类型的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（）函数。

在mat-tab内读取组件的属性'style'会显示“无法读取未定义的属性'style'”错误消息

问题

2 个答案: