在 Angular 中,Provider 和 Token 是两个非常重要的概念。他们是 Angular 提供的构建组件和服务的核心机制。
Provider 和 Token 的定义
- Provider 是一个可以创建或配置服务实例的工厂函数。
- Token 是一个注入器的键,它用来为一个可注入对象提供标识或名称。
区别与联系
Provider 和 Token 的关系非常密切,下面介绍一下它们之间的区别与联系。
区别
- Provider 是一种可创建或配置服务实例的机制,它负责提供依赖项的创建过程。
- Token 是一种用来获取依赖项的机制,它定义了一个键,用于查找一个注入器中的依赖项。
联系
- Provider 创建的是一个实际的对象,而 Token 定义的只是一个键,用来获取实际的对象。
- Provider 和 Token 都是 Angular 中实现依赖注入的核心机制。
- 在使用依赖注入时,Provider 和 Token 总是配对使用的。
Provider 和 Token 的使用
- Provider 的使用
Provider 在 Angular 中用来创建服务实例或配置供应商。它可以用来自定义服务,配置依赖项或动态创建或替换依赖项。Angular 中提供了很多种 Provider,可以用来满足不同的需求。
下面以一个例子来说明 Provider 的使用方法。我们会创建一个名为 Config
的服务,它会从外部资源 (app.config.json
) 中加载应用程序所需的配置信息。
我们需要做如下几个步骤:
- 在
app.module.ts
中将ConfigService
注册为供应商
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ------------------- ----------- ---------- - -------------- -- ----- - -- ------ ----- --------- - -
- 定义
Config
服务,并将app.config.json
中获取到的配置信息注入到该服务中
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ------------- - ---- ------------------- ------ --------- --------- - ------- ------- ---------- -------- - ------------- ------ ----- ------ - ------- ------- ---------- ------------------- -------------- -------------- - - ------ - ----------- - ------------------------------- - -------- ------- - ------ ----------------- - -
- 在组件中使用
Config
服务
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ------ - ---- ----------- ------------ --------- ----------- --------- - -------- ---- -- ------ -------- ---------- ----- -- --------- -------- - -- ------ ----- ------------ - ------- ------- ------- ------- ---------- -------- ----------------------------- ------- ------- ------- - ----------- - --------------------- -------------- - ------------------------ - -
在上面的例子中,我们使用 ConfigService
提供的 getConfig
方法来获取应用程序的配置信息。然后,将该信息注入到 Config
服务中,以便我们在其他组件中使用。
- Token 的使用
Token 用来定义一个唯一的注入器键,用于查找一个注入器中的依赖项。
在 Angular 中,Token 主要用于两种情况:
- 使用
@Inject
装饰器来获取依赖项
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - ------ - ---- ----------- ------------ --------- ----------- --------- - -------- ---- -- ------ -------- ---------- ----- -- --------- -------- - -- ------ ----- ------------ - ------- ------- ------- ------- ---------- -------- ----------------------------- ------- ------- ------- - ----------- - --------------------- -------------- - ------------------------ - -
在上述代码中,我们使用 @Inject
装饰器和 Config
服务的 Token(字符串 'config'
)来获取注入到组件中的 Config
服务。
- 在 Provider 中使用 Token
下面以一个例子来说明 Provider 中如何使用 Token。
-- -------------------- ---- ------- ------ - ----------- --------- -------------- - ---- ---------------- ------ --------- --------- - ------- ------- ---------- -------- - ------ ----- ---------- - --- ---------------------------------------- ------------- ----------- ------- -- ------ ----- ------------- - ------------------------------- ------- ------- ---------- -- ----------- - ------ ------------ - - ------ ----- -------------------- -------- - - -------- ----------- --------- - ------- ------------------------- ---------- ----- -- --
在上述代码中,我们首先定义了一个用来获取配置信息的 APP_CONFIG
常量,它是一个用来通过 Token 获取依赖项的 InjectionToken。然后,我们在 ConfigService
的构造函数中使用 @Inject
装饰器和 APP_CONFIG
的 Token 来获取配置信息。
最后,我们定义了一个 APP_CONFIG_PROVIDER
供应商,它提供了配置信息的值。这个供应商的 provide
属性是 APP_CONFIG
的 Token,用来匹配 ConfigService
中使用的依赖项的 Token,useValue
属性用来设置配置信息的值。
总结
在本文中,我们介绍了 Angular 中 Provider 和 Token 的概念、区别与联系,以及它们的应用场景。我们通过一个例子详细地介绍了 Provider 和 Token 的使用方法,在实际开发中,我们可以使用它们来实现更丰富、更灵活、更符合业务需求的依赖注入。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6482f77948841e9894255434