什么是ViewChild

Question

组件中有声明

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

}

这是否意味着我确实引用了UploaderComponent组件的TEMPLATE？

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

什么是静态的？

Answer 1

  

这是否意味着我确实引用了UploaderComponent组件的TEMPLATE？

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

  

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

@ViewChild的目的是从您当前组件的视图（模板）中查询元素。

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

• 以声明方式：通过在视图中使用其选择器
• 势在必行：简单来说，一切都在您的课程中完成。现在重要的是要了解嵌入式视图和主机视图（这些是必须加载的组件）

这些视图必须由视图容器托管，顾名思义，该容器包含多个视图。

Read more here关于主机视图，嵌入式视图和视图容器。

如果您未在模板中使用过该组件，那么您就不应在课堂上使用它。

  

什么是静态的？

何时：

• 是
  • 可以在ngOnInit()上访问它
  • 不依赖于*ngIf，*ngFor
  中的任何一个
• 错误
  • 取决于绑定分辨率（*ngIf等...）
  • 在ngAfterViewInit和ngAfterViewChecked中可以访问

您可以找到更多详细信息here。

编辑

  

为什么将其命名为@ViewChild而不是@ViewCurrent

这是我的假设：

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

摘录自here

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

root.component.ts

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

TLDR 是：从技术上讲，组件视图中的每个元素（DOM元素或组件）都是该组件的子代。

Answer 2

当您想从父组件类访问子组件，指令或DOM元素时，使用ViewChild装饰器很容易。 ViewChild返回与给定的组件，指令或模板引用选择器匹配的第一个元素。如果您要访问多个子级，请改用ViewChildren。Check this for detailed explanation