升级提供接口的 AngularJS ServiceProvider答案

【问题标题】：Upgrade AngularJS ServiceProvider which provides an interface升级提供接口的 AngularJS ServiceProvider
【发布时间】：2017-09-03 11:52:02
【问题描述】：

我正在尝试升级 AngularJS 服务提供者 (TranslateProvider)，它从 $get 函数返回一个接口实例。

问题在于，在 Angular 提供程序对象 (translateProvider) 中，provide 字段应该是 Translate，但它不能使用，因为 TypeScript 接口仅用于编译时。这是我得到的错误：

TS2693: 'Translate' only refers to a type, but is being used as a value here.

这是源代码的要点：

export class TranslateProvider implements ng.IServiceProvider {

    public $get() {

        const service: Translate = <Translate> function translate(key: string, parameters: Dictionary<StringLike>): string {

        return service;
    }
}

export interface Translate {
    (translationKey: string, parameters?: Dictionary<StringLike>): string;
}

export function translateFactory(i: any) {
    return i.get('translate');
}

export const translateProvider = {
    provide: TranslateProvider,
    useFactory: translateFactory,
    deps: ['$injector']
};

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule,
    ],
    declarations: [
    ],
    providers: [
        translateProvider,
    ]
})

【问题讨论】：

标签： angular angular-upgrade

【解决方案1】：

我在Angular docs the explanation about Injection Tokens找到了。

在代码的某处（通常在定义接口的文件中）需要添加

export const TRANSLATE_TOKEN = new InjectionToken<Translate>('Translate');

这个令牌以后可以用来向注入器请求这个服务。

升级注册现在看起来像这样：

export const translateProvider = {
    provide: TRANSLATE_TOKEN,
    useFactory: translateFactory,
    deps: ['$injector']
};

最后，将使用此依赖项的组件的 ctor 如下所示：

constructor(@Inject(TRANSLATE_TOKEN) private translate: Translate) {
}

【讨论】：