什么是ViewChild

Question

组件中有声明：

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

}

这是否意味着我参考了 UploaderComponent 组件的 TEMPLATE？

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

静态是什么意思？

Answer 1

当你想从父组件class访问子组件、指令或DOM元素时，使用ViewChild装饰器很容易做到。 ViewChild returns 匹配给定组件、指令或模板引用选择器的第一个元素。如果您想要访问多个子项，则应改用 ViewChildren。Check this for detailed explanation

Answer 2

Does it mean that I do reference to TEMPLATE of UploaderComponent component?

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

How then to use @ViewChild in current component template, now there is no place where it is used in template.

@ViewChild 的目的是 从当前组件的 view(template) 查询 元素。

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

声明式：通过在视图

选择器

势在必行：简单来说，一切都在你的class里面完成。现在重要的是要了解 嵌入式视图 和 主机视图 （这些是命令式加载的组件）

这些视图必须由视图容器托管，顾名思义，它的工作是包含多个视图。

Read more here 关于 宿主视图、嵌入式视图和视图容器。

如果您没有在您的模板中使用该组件，那么您应该无法在您的 class 中获取它。

And what does mean static?

时间：

真
- 它可以在 ngOnInit()
- 不依赖于*ngIf、*ngFor
假
- 取决于绑定分辨率（*ngIf 等...）
- 可在 ngAfterViewInit 和 ngAfterViewChecked

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

编辑

why it is named as @ViewChild no @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;
}

A TLDR 将是：组件视图中的每个元素（DOM 元素或组件）在技术上都是该组件的子组件。

什么是ViewChild

What is ViewChild

angular

angular5

angular8

编辑

root.component.ts