Angular 是一款流行的前端框架，其中的两个装饰器 @Input 和 @ViewChild 是很常用的。但是，在使用这两个装饰器时，有时候会遇到一些坑。在本文中，我们将探讨这些问题，并为您提供解决方案。
问题描述
@Input 无法监听到变化
在某些情况下，@Input 装饰器无法正确监听到变化。比如在下面的代码示例中，当 name 变量的值改变时，父组件的值没有更新到子组件中：
-- -------------------- ---- -------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
-------- ----- -------
------------- - -
----------- ---- -
----------------------- -- --- ---------
-
-<!-- 父组件的模板 --> <app-child [name]="myName"></app-child>
@ViewChild 获取不到子组件
另一方面，@ViewChild 装饰器也可能无法获取到子组件。例如，在下面的代码示例中，当尝试获取到子组件时，console.log(this.childElem) 的结果是 undefined：
-- -------------------- ---- -------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------------------- - ------- ---- - - ---------- ---------------
------------- - -
----------- ---- -
---------------------------- -- --- ---------
-
-<!-- 父组件的模板 --> <app-child #child></app-child>
解决方案
@Input 监听变化
要解决 @Input 无法监听到变化的问题，我们需要在子组件中引入 OnChanges 接口，重写 ngOnChanges 函数，并在函数中处理变化。下面是相应的代码示例：
-- -------------------- ---- -------
------ - ---------- ------- ------ ---------- ------------- - ---- ----------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------- --------- -
-------- ----- -------
------------- - -
----------- ---- -
-----------------------
-
-------------------- --------------- ---- -
-- -------------- -
---------------------------------------
-
-
-上述代码中，我们引入了 OnChanges 接口，并在子组件中重写了 ngOnChanges 函数。在函数中，我们使用了 SimpleChanges 参数来获取变化信息，并处理了变化。
@ViewChild 获取子组件
要解决 @ViewChild 获取不到子组件的问题，我们可以在子组件的 ngOnInit 函数中使用一个 ngAfterViewInit 的延迟装饰器，这个装饰器会等到视图加载完成后再执行。下面是相应的代码示例：
-- -------------------- ---- -------
------ - ---------- ------- ---------- ------------- - ---- ----------------
------ - -------------- - ---- ---------------------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------- ------------- -
-------------------------- ---------- ---------------
------------- - -
----------- ---- -
-
------------------ ---- -
----------------------------
-
-上述代码中，我们在父组件中引入了 AfterViewInit 接口，并在 ngAfterViewInit 函数中使用 @ViewChild 装饰器来获取子组件。
结论
通过本文，我们已经了解了如何解决在 Angular 应用中使用 @Input 和 @ViewChild 遇到的问题，并提供了相应的代码示例。我们希望本文能够帮助您解决这些常见问题，同时也能深化您对 Angular 中的组件和装饰器的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709e301d91dce0dc87cc186