在Angular应用程序中，组件是构建用户界面的基本单元。它们由模板、控制器和样式组成。控制器是Angular组件的核心部分之一，负责处理应用程序逻辑并与视图进行交互。然而，在开发过程中，您可能会遇到控制器中的绑定未定义的问题。在本文中，我们将讨论这个问题及其解决方案。
问题描述
当您尝试从模板中使用属性或事件绑定来调用控制器中的函数时，可能会遇到"undefined"错误。例如，以下代码片段中的问题：
<!-- my-component.html --> <button (click)="onButtonClick()">点击我</button>
-- -------------------- ---- -------
-- ---------------
------ - --------- - ---- ----------------
------------
--------- ---------------
------------ ----------------------
--
------ ----- ----------- -
--------------- -
---------------------
-
-此示例中，当单击按钮时，应该在控制台中输出"按钮被单击"。但是，实际上，当单击按钮时，控制台不显示任何内容，并且浏览器控制台将显示以下错误消息：
ERROR TypeError: Cannot read property 'onButtonClick' of undefined
这是因为组件必须显式声明它需要哪些属性或方法，否则它们将在组件实例化之前未定义。
解决方案
有两种解决方案来解决此问题。您可以使用依赖注入或构造函数来解决这个问题。
依赖注入
依赖注入是Angular中处理组件依赖关系的一种方式。通过使用@Inject装饰器，您可以将其他服务或组件作为参数注入到控制器中。这使得您可以直接从控制器中访问这些服务或组件。
例如，以下代码片段演示了如何使用依赖注入解决上述问题：
-- -------------------- ---- -------
-- ---------------
------ - --------- - ---- ----------------
------------
--------- ---------------
------------ ----------------------
--
------ ----- ----------- -
------------- --
--------------- -
---------------------
-
-按照惯例，我们需要将所需的服务或组件列出在构造函数的参数列表中。但是，在这种情况下，我们没有任何服务或组件要注入。因此，我们只需保留空的构造函数即可。
构造函数
第二种解决方案是使用构造函数。这包括将控制器的属性声明为类成员，并在构造函数中对其进行初始化。
例如，以下代码片段演示了如何使用构造函数解决上述问题：
-- -------------------- ---- -------
-- ---------------
------ - --------- - ---- ----------------
------------
--------- ---------------
------------ ----------------------
--
------ ----- ----------- -
-------------- -- -- -----
------------- -
------------------ - -- -- -
---------------------
--
-
-在这种情况下，我们将onButtonClick声明为类成员，并在构造函数中初始化它。这样，我们就可以从模板中访问控制器的onButtonClick方法了。
结论
在本文中，我们讨论了在Angular应用程序中遇到控制器中绑定未定义的问题。我们提供了两种解决方案：依赖注入和构造函数。无论您选择哪种解决方案，都需要记住要在组件中显式声明它需要哪些属性或方法，否则它们将在组件实例化之前未定义。
希望本
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27403