Angular 是一个流行的前端框架，可以用于开发单页应用程序（SPA）和移动应用程序。在 Angular 中，服务是一个可注入的类，它可以在多个组件之间共享数据和功能。但是，有时候我们可能会遇到服务未注入到组件中的问题。本文将详细介绍如何解决这个问题。
问题描述
当我们在一个组件中使用自定义服务时，可能会遇到以下错误：
Error: NullInjectorError: No provider for MyService!
这个错误表示不能在组件中找到需要的 MyService 服务。这通常是因为服务未被正确注入到应用程序中导致的。让我们来看看解决这个问题的方法。
解决方法
步骤1：在服务中添加注入器
在自定义服务中，我们需要添加注入器。
-- -------------------- ---- ------- ------ - ----------- -------- - ---- ---------------- ------------- ----------- ------ -- ------ ----- --------- - ------------------- --------- --------- - - -- --- -
注入器是 Angular 的依赖注入系统的核心。我们需要将注入器作为服务的依赖项传递，并在构造函数中注入它。这将允许我们在服务中使用注入器以获取其他服务。
步骤2：手动请求所需的服务
在组件中，我们需要手动请求我们需要的服务。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ---------- -
-- ---------
-------------- - ---------------------------------------
-
-- ---
-我们需要在组件的构造函数中注入所需的服务，并使用 injector.get() 方法手动请求它。这将确保我们可以在组件中使用所需的服务。
步骤3：将服务添加到模块的提供商中
最后，我们需要将服务添加到模块的提供商中。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- -
-- -------------
---------
--
---------- --------------
--
------ ----- --------- - -在模块的 providers 数组中添加服务，这将确保服务会被注入到应用程序中。现在，我们可以在组件中使用自定义服务了。
示例代码
以下是一个具有自定义服务的示例 Angular 应用程序。该应用程序显示一个计时器，用于显示自定义服务中保存的当前时间。我们将解决服务未注入到组件中的问题。
my.service.ts
-- -------------------- ---- -------
------ - ----------- -------- - ---- ----------------
-------------
----------- ------
--
------ ----- --------- -
------- ---------- -----
------------------- --------- --------- -
-------------- - --- -------
-
------ ----------------- ------ -
----- ----------- - --- -------
----- ---- - --------------------- - -------------------------
----- ------- - --------------- - ------
----- ------- - ------------------ - ----
----- ----- - ------------------ - ----
------ ------------------------------ - -----
-
-这是一个非常简单的服务，它保存了应用程序启动时的开始时间，并提供了一个 getCurrentTime() 方法，该方法会计算当前时间并返回一个格式化的字符串。
app.component.ts
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------ ------------ -------
------------------- ---------- ---------- -
-- ---------
-------------- - ---------------------------------------
-- ------
-------------- -- -
---------------- - --------------------------------
-- ------
-
-这是一个简单的组件，它将自定义服务注入到其构造函数中。然后，我们手动请求了所需的服务，并使用 setInterval 方法更新当前时间。
app.component.html
<div>
<h1>{{ currentTime }}</h1>
</div>这是模板，它在页面上显示当前时间。我们绑定了 currentTime 属性，这个属性由组件中的自定义服务更新。
app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- -
---------
--
---------- --------------
--
------ ----- --------- - -这是应用程序的模块，我们在这里将自定义服务添加到提供商列表中。
结论
当我们在使用 Angular 开发应用程序时，经常会遇到服务未注入到组件中的问题。通过按照上述步骤，我们可以轻松地解决这个问题。我们需要在服务中添加注入器，手动请求所需的服务，并将服务添加到提供商中。这将确保服务能够正确注入到组件中，并且我们可以使用它们提供的功能。
希望这篇文章对您有所帮助，如果您遇到了其他 Angular 相关的问题，可以查看 Angular 官方文档进行参考学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674565a2c1a23897ea940724