什么是ViewChild？

Question

在组成部分中有声明：

export class GlossariesComponent implements OnInit {
  @ViewChild(UploaderComponent, {static: false})
  private uploader: UploaderComponent;

}

这是否意味着我引用了UploaderComponent组件的模板？

那么如何在当前组件模板中使用@ViewChild，现在没有地方在模板中使用它。

静电是什么意思？

Answer 1

这是否意味着我引用了UploaderComponent组件的模板？

不完全是，您将获得该组件的类的实例。

然后如何在当前组件模板中使用@ViewChild，现在模板中没有使用@ViewChild的地方。

@ViewChild的目的是从当前组件的@ViewChild中查询元素

您可以以两种方式使用组件：

• declaratively：通过在视图中使用其选择器
• 简单地说，imperatively：是在您的类内完成的。现在，了解、嵌入式视图、和主机视图(这些是必须加载的组件)是很重要的。

这些视图必须由视图容器承载，正如其名称所暗示的那样，视图容器的任务是包含多个视图。

在这里读更多关于主机视图、嵌入式视图和视图容器。

如果您没有在模板中使用该组件，那么您就不应该能够在类中获取它。

静电是什么意思？

当：

• 真
  • 它可以在ngOnInit()中访问。
  • 不依赖于任何*ngIf，*ngFor

​

• false
  • 依赖于绑定解析(*ngIf等)
  • 在ngAfterViewInit和ngAfterViewChecked中可访问

​

您可以找到更多的细节这里。

编辑

为什么它被命名为“ViewChild no”ViewCurrent

以下是我的假设：

<app-root>
  <#VIEW>
    <app-child>
     <#VIEW>
       ...content goes here...
     </#VIEW>
    </app-child>
  <#VIEW>
</app-root>

摘自https://angular.io/guide/hierarchical-dependency-injection#logical-structure-of-the-template的片段

现在，假设您想要查询app-child

root.component.ts

@Component({ /* ... */ })
export class RootComponent {
 @ViewChild(AppChild, { static: false })
 private appChild: AppChild;
}

TLDR应该是:组件视图中的每个元素(DOM元素或组件)在技术上都是该组件的子元素。

Answer 2

当您想从父组件类访问子组件、指令或DOM元素时，使用ViewChild装饰器很容易。ViewChild返回与给定组件、指令或模板引用选择器匹配的第一个元素。在需要访问多个子节点的情况下，可以使用ViewChildren .请查看这个以获得详细解释。。