这种方式有个问题，假设其它服务也要使用该地址，那么就得按照同样的方式去定义 API 接口地址。另外假设 API 接口地址需要更新，那就需要修改多个地方。针对上述问题，我们可以使用 ValueProvider 来解决问题。
使用 ValueProvider
@NgModule({ ..., providers: [ { provide: 'apiUrl', useValue: 'http://localhost:4200/heros' } ], bootstrap: [AppComponent] }) export class AppModule { }
更新 HeroService 服务
@Injectable() export class HeroService { constructor(private loggerService: LoggerService, private http: Http, @Inject('apiUrl') private apiUrl) { } getHeros(): Observable<Array<{ id: number; name: string }>> { this.loggerService.log('Fetching heros...'); return this.http.get(this.apiUrl) .map(res => res.json()) } }
在 HeroService 类的构造函数中，我们通过 @Inject('apiUrl') 方式，注入 apiUrl 该 Token 对应的依赖对象，即 'http://localhost:4200/heros' 。为什么不能使用 private apiUrl: 'apiUrl' 的方式，希望读者好好回忆一下，之前我们介绍过的相关内容。
以上代码成功运行后，在 :4200/ 页面，我们将看到预期的结果：
ID: 11 - Name: Mr. Nice ID: 12 - Name: Narco ID: 13 - Name: Bombasto ID: 14 - Name: Celeritas ID: 15 - Name: Magneta
我有话说
为什么在构造函数中，非 Type 类型的参数只能用 @Inject(Something) 的方式注入 ？
因为 Type 类型的对象，会被 TypeScript 编译器编译。即我们通过 class 关键字声明的服务，最终都会编译成 ES5 的函数对象。
在构造函数中，Type 类型的参数能用 @Inject(Type) 的方式注入么？
Type 类型的参数也能使用 @Inject(Type) 的方式注入，具体如下：
constructor(@Inject(Http) private http) { }
同样也可以使用以下方式：
constructor(@Inject(Http) private http: Http) { }
第一种方式虽然可以正常编译，但 IDE 会有如下的提示信息：
[ts] Parameter 'http' implicitly has an 'any' type.
第二种方式，虽然 Angular 内部会合并 design:paramtypes 与 parameters 内的 metadata 信息，但本人觉得是有点冗余了。 总而言之，若果是 Type 类型的参数，推荐使用下面的方式：
constructor(private http: Http) { }
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者使用Angular 4能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: