-1

问题

所以我在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'”错误消息。

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

4

2 回答 2

0

我不确定您为什么通过查询访问您ViewChild 的div。 document我建议您坚持使用 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 元素进行引用）。

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

于 2019-12-06T10:47:06.523 回答
0

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

于 2019-12-09T04:09:10.153 回答