[Angular 2] Understanding OpaqueToken
2016-09-18 02:52
246 查看
When using provider string tokens, there’s a chance they collide with other third-party tokens. Angular has with the concept of opaque tokens, that allow us to make whatever token we use unique, so we don’t run into collision problems. In this lesson we’ll explore how they work.
We created a value provide like this:
It turns out that this can be problematic in case we're using, for example, a third-party library that comes with its own provider that introduces the same token.
third-party.ts:
So when you inject third-pary library into our app.ts:
Then it will rewrite our 'apiUrl' because THIRD_PARTY_PROVIDERS comes behind apiUrl.
To solve this problem, Angular introduce OpaqueToken.
app.tokens.ts:
Now 'API_URL' is a class instance not just a string, class instance is always unique.
Then in app.ts:
In DataService:
Now we won't have conflict anymore.
As a general rule, always create opaque tokens when using string tokens for providers. For example:
third-party.ts:
We created a value provide like this:
providers: [ TodoService, ConsoleService, TranslateService, ,{ provide: LoggerProvider, useFactory: (cs, ts) => { return new LoggerProvider(cs, ts, true) }, deps: [ConsoleService, TranslateService] } ,{ provide: apiUrl, useValue: 'http://localhost:3000/api' } ],
It turns out that this can be problematic in case we're using, for example, a third-party library that comes with its own provider that introduces the same token.
third-party.ts:
export const THIRD_PARTY_PRIVODERS = [ { provide: apiUrl, useValue: 'someurl' } ]
So when you inject third-pary library into our app.ts:
providers: [ TodoService, ConsoleService, TranslateService, ,{ provide: LoggerProvider, useFactory: (cs, ts) => { return new LoggerProvider(cs, ts, true) }, deps: [ConsoleService, TranslateService] } ,{ provide: apiUrl, useValue: 'http://localhost:3000/api' } ,THIRD_PARTY_PROVIDERS ],
Then it will rewrite our 'apiUrl' because THIRD_PARTY_PROVIDERS comes behind apiUrl.
To solve this problem, Angular introduce OpaqueToken.
app.tokens.ts:
import {OpaqueToken} from '@angular/core'; export const API_URL = new OpaqueToken('apiUrl')
Now 'API_URL' is a class instance not just a string, class instance is always unique.
Then in app.ts:
import {API_URL} from './app.tokens' providers: [ TodoService, ConsoleService, TranslateService, ,{ provide: LoggerProvider, useFactory: (cs, ts) => { return new LoggerProvider(cs, ts, true) }, deps: [ConsoleService, TranslateService] } ,{ provide: API_URL, useValue: 'http://localhost:3000/api' } ,THIRD_PARTY_PROVIDERS ],
In DataService:
import {LoggerProvider} from './LoggerProvider'; import {Injectable} from '@angular/core'; import {Http} from '@angular/core'; import {Inject} from '@angular/core'; import {API_URL} from './app.tokens'; @Injectable export class TodoService{ constructor(@Inject(API_URL) private apiUrl, private logger: LoggerProvider, private http: Http){ } getTodos(){ this.logger.debug('Items', this.todos); return this.http.get(`${this.apiUrl}/todos`).map(res => res.json()); } }
Now we won't have conflict anymore.
As a general rule, always create opaque tokens when using string tokens for providers. For example:
third-party.ts:
import {OpaqueToken} from '@angular/core'; const API_URL = new OpaqueToken('apiUrl'); const CONFIG_URL = new OpaqueToken('configUrl'); export const THIRD_PARTY_PROVIDERS = [ { provide: API_URL, useValue: 'somevalue' }, { provide: CONFIG_URL, useValue: 'somevalue' } ]
相关文章推荐
- Understanding Angular’s $apply() and $digest()
- 使用 AngularJS & NodeJS 实现基于token 的认证应用(转)
- [转载]Understanding Service Types for Angularjs
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- angular1.5.3.min.js:116 SyntaxError: Unexpected token g in JSON at position 63
- angular 拦截器每个请求传递用户的token
- Understanding Angular’s $apply() and $digest()
- 【Angular2】Unexpected token / in JSON at position 35
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- Understanding Angular’s $apply() and $digest() / 理解Angular中的$apply()以及$digest()
- angular创建项目,ng new my-app unexpected token,node更新 invalid version
- angular 用拦截器统一处理http请求和响应 比如加token
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- angular2 集成ckeditor 提示 ”Unexpected token <“
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- Understanding AngularJS Scopes
- AngularJs Understanding the Model Component
- 使用 AngularJS & NodeJS 实现基于 token 的认证应用
- Understanding ngDoCheck and KeyValueDiffers in Angular(译)
- AngularJs Understanding the Controller Component