如何在Angular(2或4)中使用第三方AngularJS(1.6)模块(angular-tr

发布时间：2020-12-17 17:33:20 所属栏目：安全来源：网络整理

导读：案子我正在将AngularJS(即Angular 1.6)应用程序升级到Angular(即Angular 4.1.3).我选择进行增量升级,因此目前AngularJS和Angular都是自举和运行的.到目前为止一切顺利,但是：应该重写为Angular的AngularJS服务之一依赖于众所周知的服务$translate,它是第三

案子

我正在将AngularJS(即Angular 1.6)应用程序升级到Angular(即Angular 4.1.3).我选择进行增量升级,因此目前AngularJS和Angular都是自举和运行的.到目前为止一切顺利,但是：应该重写为Angular的AngularJS服务之一依赖于众所周知的服务$translate,它是第三方AngularJS(读取Angular 1)模块pascalprecht.translate的一部分.换句话说,$translate服务是注入MyService,它应该成为Angular(读取Angular 4)服务.

MyService(剥离)看起来像这样：

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

@Injectable()
export class MyService {
    // Here comes the injection (how to do it?).
    constructor(private $translate: $translate) {

    }

    foo() {
        // Use the service
        this.$translate('HELLO_WORLD');
    }
}

它位于MyModule中：

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

import { MyService } from './my.service';

@NgModule({
    providers: [
        MyService
    ]
})
export class MyModule {
}

问题

现在,当MyService驻留在Angular模块中时,如何将$translate注入MyService,而$translate是第三方AngularJS模块的一部分？

我知道如果AngularJS服务位于同一个模块中(或者至少模块是我自己的解决方案的一部分),如何将AngularJS服务注入Angular服务.它在official docs中解释.有没有办法处理第三方服务？我是否需要在MyModule的提供商中注册该服务？

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

import { MyService } from './my.service';

// How this line should look line then?
import { $translate } from 'node_modules/angular-translate/...';

@NgModule({
    providers: [
        MyService,$translate
    ]
})
export class MyModule {
}

还是我想要实现不可能？

解决方法

好吧,经过几个小时的挣扎,我终于找到了解决方案.这里是：

升级第三方服务

首先,按照Angular’s official guidelines并升级第三方服务提供商 – $translate.像这样：

AJS升级,providers.ts

import { InjectionToken } from '@angular/core';
import { downgradeInjectable } from '@angular/upgrade/static';

import 'angular-translate';

// Variable 'i' holds the standard AngularJS injector
export function $translateFactory(i: any) {
    return i.get('$translate');
};

// There is no class representing the good old $translate service so we have
// a non-class dependency. Therefore we use an InjectionToken (Angular 4) or
// OpaqueToken (Angular 2).
export let $translate = new InjectionToken('$translate');

// Finally create the upgraded provider
export const $translateProvider = { 
    provide: $translate,useFactory: $translateFactory,deps: ['$injector']
};

有一点需要注意,$translate服务可能依赖于其他旧的AngularJS服务,例如(在我的例子中)$translateStaticFilesLoader或$translateMessageFormatInterpolation.如果这也是您的情况,请务必扩展上面的代码并为这些服务创建升级的提供程序(将它们保存在同一个文件中).

确保import语句有效

angular-translate作为节点模块安装,因此声明

import 'angular-translate';

如果您的tsconfig.json设置为使用moduleResolution：“node”,则工作正常.

然后,当然,您需要确保import语句即使在将代码从TypeScript转换为ES5(或您使用的任何目标)并由模块加载器(在我的情况下为SystemJS)中获取之后也能正常工作.

请注意,我们导入了angular-translate脚本而没有从中获取任何内容,只是到了cause side effects.基本上,导入确保简单地执行包含所需服务$translate的脚本并为AngularJS $注入器注册$translate服务.

在Angular模块中注册升级的提供程序

现在确保$translate服务的新升级提供程序已在MyModule的其他提供程序中注册.

my.module.ts

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

import { MyService } from './my.service';
import { $translateProvider } from './ajs-upgraded-providers';

@NgModule({
    providers: [
        MyService,$translateProvider
    ]
})
export class MyModule {
}

用它

最后,在MyService中使用$translate服务.

my.service.ts

import { Injectable,Inject } from '@angular/core';

import { $translate } from './ajs-upgraded-providers';

@Injectable()
export class MyService {
    // Notice the usage of InjectionToken
    constructor(@Inject($translate) private $translate: any) {
    }

    foo() {
        this.$translate('hello.world').then((translation: string) => {
            console.log(translation);
        });
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!