Question

我想创建一个类，以便在示例应用程序中共享一些常见的api数据，但我无法理解为什么以下两个版本之一无效：

版本1 [./apiKeys.ts] - 工作

import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  key: string;
  url: string;
  constructor(){
    this.key = 'API_KEY';
    this.url = 'API_URL';
  }
}

第2版[./apiKeys.ts] - 无效

import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  constructor(
    public key:string = 'API_KEY',
    public url:string = 'API_URL'
  ){}
}

然后我将它作为bootstrap的提供者传递

./ main.ts

import {SomeApi} from './apiKeys.ts'
bootstrap(AppComponent, [SomeApi])

但是在启动时我收到以下错误（考虑版本2 ）：

ORIGINAL EXCEPTION: No provider for String! (SomeApi -> String)

为什么第2版无效？ 感谢

修改

根据GünterZöchbauer的建议，我看了一些资源，发现我认为对我的情况最好的解决方案，这就是我做的：

./ apiKeys.ts

import { OpaqueToken } from '@angular/core';

export interface AppConfig{
  key: string;
  url: string;
}

export const DI_CONFIG: AppConfig = {
  key: 'AIzaSyAjC3U-CbKYm_4sYV90XqJ_Upe8ID9jlxk',
  url: 'https://www.googleapis.com/youtube/v3/search'
}

export let APP_CONFIG = new OpaqueToken('app.config');

./ main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import {DI_CONFIG, APP_CONFIG} from './apiKeys';

bootstrap(AppComponent, [{ provide: APP_CONFIG, useValue: DI_CONFIG }]);

./ apiService.ts

import {Injectable, Inject} from '@angular/core';
import {APP_CONFIG, AppConfig} from './apiKeys';

@Injectable()
export class ApiService{
  constructor(
    @Inject(APP_CONFIG) private config: AppConfig
  ){}
  // i can then use it with this.config.url - this.config.key
}

来源：

Answer 1

如果您没有将@Inject(...)添加到构造函数参数，Angulars DI会使用参数类型作为查找提供程序的键。

在你的情况下，这两个参数都是string，这是不明确的您根本没有注册提供商。

您需要提供像

这样的人工密钥

bootstrap(AppComponent, [
  {provide: 'myKey', useValue: 'A'}, 
  {provide: 'myUrl', useValue: 'B'}, 
  SomeApi
])

import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  key: string;
  url: string;
  constructor(){
    @Inject('myKey') this.key = 'API_KEY';
    @Inject('myUrl') this.url = 'API_URL';
  }
}

如果您不想提供这些值，可以使用@Optional()

import {Injectable} from '@angular/core';
@Injectable()
export class SomeApi{
  @Optional() key: string;
  @Optional() url: string;
  constructor(){
    this.key = 'API_KEY';
    this.url = 'API_URL';
  }
}

然后DI只在找到匹配的提供者时才会注入。

Angular 2 Injectable Class在创建和初始化参数时不起作用

修改

1 个答案: