@Inject与InjectionToken的使用

DI依赖注入是一种编码模式，构造函数中的参数通过注入器获取不需要自己创建。@Inject是参数修饰符，表示该参数是通过注入的方式获取。依赖的内容可以是类，也可以是InjectionToken，通过@Inject注入的方法使用步骤如下：

1、如果在一个自己写的类注入另一个类

可以通过ReflectiveInjector.resolveAndCreate形式先创建，再通过get方法获取实例。

2、如果在组件中或者服务中使用

（1）先在component或者模块中先用provider注入一次，providers:[{provide:类名,useFactory等}]

（2）在construtor中通过@Inject注入实例

（3）如果注入的是interface或者字符串等则需要先生成InjectionToken.

具体示例如下：

通过一段代码表示依赖注入与@Inject的使用有A类，B类，B类依赖类A：

class A{name:string;age:Number;constructor(n:string, a:number){this.name = n;this.age = a;}
}/*** 通过依赖注入*/
class B{a;constructor(@Inject(A) a:A // 通过依赖注入){this.a = a;}
}const injector = ReflectiveInjector.resolveAndCreate([{provide:A,useFactory:()=>{return new A('a',34)}},Aa
]);const b1 = new B(injector.get(A)); // 通过injector注入
const a1 = new A(new A('dd',23)); // 通过正常的方式注入
const a2 = injector.get(A); //通过injector获取
const a3 = injector.get(A);
console.log(a2==a3); // injector.get如果无会创建，如果有直接返回

在使用@Inject(Token) value:Token之前，需要通过provider注入值。一般我们在根模块中进行注入，而后在各个类中通过@Inject进行注入。

比如在模块中或者组件装饰器中使用[{provide:Aa,useFactory:()=>{return xxx}}]进行默认的初始化

InjectionToken（来自angular中文官网）：

并非所有的依赖都是类。有时候你会希望注入字符串、函数或对象。

应用通常会用大量的小型参数来定义配置对象，比如应用的标题或 Web API 端点的地址。这些配置对象不一定总是类的实例。它们还可能是对象字面量，如下例所示。

export const HERO_DI_CONFIG: AppConfig = {apiEndpoint: 'api.heroes.com',title: 'Dependency Injection'
};

TypeScript 接口不是有效的令牌

HERO_DI_CONFIG 常量满足 AppConfig 接口的要求。不幸的是，你不能用 TypeScript 的接口作为令牌。在 TypeScript 中，接口是一个设计期的概念，无法用作 DI 框架在运行期所需的令牌。

// FAIL! Can't use interface as provider token
[{ provide: AppConfig, useValue: HERO_DI_CONFIG })]

为非类依赖选择提供商令牌的解决方案是定义并使用 InjectionToken 对象。下面的例子展示了如何定义那样一个令牌。

import { InjectionToken } from '@angular/core';export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');//工厂providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
//注入constructor(@Inject(APP_CONFIG) config: AppConfig) {this.title = config.title;
}

InjectionToken的用法

class InjectionToken<T> {constructor(_desc: string, options?: { providedIn?: Type<any> | "root"; factory: () => T; })ngInjectableDef: never | undefinedprotected _desc: stringtoString(): string
}/*使用案例*/
const BASE_URL = new InjectionToken<string>('BaseUrl');
const injector =Injector.create({providers: [{provide: BASE_URL, useValue: 'http://localhost'}]});
const url = injector.get(BASE_URL);
// here `url` is inferred to be `string` because `BASE_URL` is `InjectionToken<string>`.
expect(url).toBe('http://localhost');

@Inject与InjectionToken的使用相关推荐

flask框架视图和路由_角度视图，路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
Angular 服务器端渲染的一个错误消息 - No provider for InjectionToken REQUEST
错误消息: NullInjectorError: R3InjectorError(AppServerModule) WindowRef -> InjectionToken SERVER_REQU ...
SAP 电商云 Spartacus UI 里的 InjectionToken 应用场景
看个具体的例子: InjectionToken 构造函数,需要传一个类型参数进去. 这个 ActionReducerMap 的定义很讲究: export declare type ActionRedu ...
Angular 如何使用 InjectionToken 的方式得到当前 location 信息
方法1:通过 Angular DOCUMENT injection token 获得方法2:直接通过全局变量 location. 第二种方式在 SSR 模式下不工作. 方法1的实现: import ...
Angular InjectionToken的一个具体使用例子
导入InjectionToken: import {InjectionToken} from '@angular/core'; 调用从@Angular/core导入的构造器,创建一个新的实例: exp ...
Angular jasmine单元测试框架TestBed.inject的执行原理
单步调试这段代码: TestBed用于单元测试代码里创建Component和service实例. injectionToken即传入TestBed.inject的function: 还是delegat ...
Angular 2 OpaqueToken InjectionToken
在 Angular 2 中,provider 的 token 的类型可以是字符串或 Type 类型.我们可以根据实际应用场景,选用不同的类型.假设我们有一个服务类 DataService,并且我们想要 ...
Unable to inject views for BcFragment{8d4c0 #1 id=0x7f0d00a1}
这个问题一般都是插入错误引起的, 当提示 ButterKnife.inject(this,sellerLayout); 这行的时候你需要查看 @InjectView(R.id....) 插入的对不对 ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...

@Inject与InjectionToken的使用

@Inject与InjectionToken的使用相关推荐

最新文章

热门文章