在 Angular 6 中，@ViewChild 是一个重要的指令，可以用于在组件中引用另一个组件、指令或原生 DOM 元素，并且可以访问它们的属性和方法。本文将详细介绍 @ViewChild 的使用方法、常见问题以及最佳实践。
@ViewChild 指令的基本用法
使用 @ViewChild 指令需要引入 ViewChild 模块，并在组件中声明要引用的对象。下面是一个使用 @ViewChild 引用原生 DOM 元素的示例代码：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- --------------- -----------
-
--
------ ----- ------------ -
---------------------- ---------- -----------
----------------- -
-----------------------------------------------------
-
-在这个例子中，我们在模板中声明了一个 button 元素，并用 #myButton 指定一个模板变量。然后我们在组件中引入了 ElementRef 类型，并使用 @ViewChild('myButton') myButton!: ElementRef; 声明 myButton 成员变量引用模板变量。最后我们在 ngAfterViewInit() 方法中访问了按钮元素的 textContent 属性。
@ViewChild 可以用于引用任何组件或指令，只需要将 ElementRef 替换为你要引用的组件或指令的类型即可。下面是一个引用另一个组件的示例代码：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------
--------- -
-----------------------
-
--
------ ----- --------------- -
-------------------------- ---------------- ---------------
----------------- -
---------------------------------
-
-在这个例子中，我们在模板中使用了 app-child 元素引用 ChildComponent 组件，然后在 ParentComponent 组件中使用了 @ViewChild(ChildComponent) childComponent!: ChildComponent; 引用了 ChildComponent 组件。最后我们在 ngAfterViewInit() 方法中输出了 childComponent 变量。
@ViewChild 常见问题及最佳实践
使用 @ViewChild 指令可能会遇到一些常见问题，下面介绍几个常见问题及最佳实践：
1. 在 ngAfterViewInit() 中使用
由于 Angular 在 ngAfterViewInit() 钩子函数中才会完成视图的渲染，所以我们应该在这个钩子函数中使用 @ViewChild。如果在 ngOnInit() 中使用 @ViewChild，那么可能会得到 undefined 的元素引用。
2. 确保元素存在
使用 @ViewChild 时需要确保元素已经渲染，否则可能会得到 undefined 的元素引用。如果你使用了 *ngIf、*ngFor 或者其他异步数据，建议使用 ngAfterViewInit() 的异步版本 ngAfterViewInit()。使用方法如下：
-- -------------------- ---- -------
------ - -------------- ---------- --------- - ---- ----------------
------------
--------- -
------------- ------------------
---- -----------------
---------------
-
--
----- ----------- ---------- ------------- -
----------------------- ---------- -----------
----------------- -
------------------------- -- -
------------------------------------------
---
-
-在这个例子中，我们使用了 Promise.resolve().then() 延迟执行输出操作，保证元素已经渲染完成。
3. 使用 static: true
默认情况下，@ViewChild 需要使用 QueryList 进行查询，这可能会使代码变得复杂和臃肿。我们可以通过将 static 参数设置为 true，使 @ViewChild 仅返回单个组件或指令的实例而不是 QueryList。这样可以使代码更简洁，并提高性能。例如：
import { Component, ViewChild } from '@angular/core';
import { MyChildComponent } from './my-child.component';
@Component({ ... })
export class MyComponent {
@ViewChild(MyChildComponent, { static: true }) childComponent!: MyChildComponent;
}4. 使用 setter 和 getter
我们可以使用 getter 和 setter 来处理 @ViewChild 变量的值，使用 getter 可以在变量被访问时自动执行操作，使用 setter 可以在变量被设置时执行操作。例如：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------------ --- --
------ ----- ----------- -
------- ----------- -----------
----------------------- --- ---------------- ----------- -
--------------- - ------
-------------------------------------------
-
--- ------------ ---------- -
------ ----------------
-
-在这个例子中，我们首先私有成员变量 _myElement 保存了 ElementRef 类型的元素引用。然后我们使用 setter 来在 _myElement 被设置时输出元素信息。
总结
@ViewChild 是在 Angular 6 中非常重要的一个指令，通过它我们可以引用组件、指令或原生 DOM 元素，并访问它们的属性和方法。在使用 @ViewChild 时，需要注意一些常见问题及最佳实践，例如在 ngAfterViewInit() 中使用，确保元素存在，使用 static 参数以及使用 getter 和 setter。掌握了这些技巧之后，@ViewChild 将成为你前端开发中不可或缺的技术工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b2efc968c7c53b0d8a8ff