Angular 是一个流行的前端框架，它提供了许多功能，包括依赖注入。但是，在 Angular 6 中，依赖注入发生了一些变化。本文将介绍 Angular 6 中解决依赖注入的最佳方法，并提供具体示例代码。
依赖注入的基础知识
首先，让我们回顾一下依赖注入的基础知识。
依赖注入是一种设计模式，用于将对象传递给另一个对象，而不必在使用该对象的代码中创建它。这样可以使代码更具可维护性和可扩展性，并且可以更容易地测试代码。在 Angular 中，依赖注入通常用于注入服务，组件和其他依赖项。
Angular 6 中的依赖注入
在 Angular 6 中，依赖注入与以前的版本不同。在以前的版本中，可以使用 @Injectable() 装饰器将服务标记为可注入的，并使用构造函数注入依赖项。但在 Angular 6 中，还需要使用 providedIn 选项，该选项会指定该服务要在哪个注入器中提供。
在Angular 6中，推荐的方式是使用 providedIn: 'root'选项将服务提供于根注入器（在Angular的层次结构中就是根模块中提供的注入器）。这样就可以确保该服务只有一个实例，并且可以从所有组件中访问。
考虑以下示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- -------------- -
------------- - -
------------- -
-- ---- -- --- --------
-
-在上面的示例中，使用 @Injectable() 装饰器将 ProductService 标记为可注入的。然后，使用 providedIn 选项将该服务提供于根注入器。
现在，在您的组件中可以使用 ProductService，如下所示：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ---------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
---------
------------------- --------------- --------------- - -
---------- -
------------- - ----------------------------------
-
-在上面的示例中，将 ProductService 注入到 ProductListComponent 构造函数中。然后，在 ngOnInit() 方法中调用 ProductService 的 getProducts() 方法来获取产品列表。
结论
在 Angular 6 中，使用 providedIn: 'root' 选项将服务提供于根注入器是最佳做法。这将确保该服务只有一个实例，并且可以从所有组件中访问。请记住，依赖注入可以使代码更具可维护性和可扩展性，并且可以更容易地测试代码。
我们希望本文提供的示例代码能够帮助您在使用 Angular 6 时了解并解决依赖注入的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676d567982fcee791c66fc9c