gpt4 book ai didi

angularjs - 如何在 Angular(2 或 4)中使用第 3 方 AngularJS(1.6)模块( Angular 翻译)

转载 作者:太空狗 更新时间:2023-10-29 17:48:15 25 4
gpt4 key购买 nike

案例

我正在将 AngularJS(即 Angular 1.6)应用程序升级到 Angular(即 Angular 4.1.3)。我选择进行增量升级,因此目前 AngularJS 和 Angular 都已启动并正在运行。到目前为止一切顺利,但是: 应该重写为 Angular 的 AngularJS 服务之一依赖于众所周知的服务 $translate,它是第 3 方 AngularJS(阅读 Angular 1)模块的一部分 pascalprecht.translate .换句话说,$translate 服务被注入(inject)到 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 注入(inject) MyService$translate 是第 3 方 AngularJS 模块的一部分吗?

如果 AngularJS 服务位于同一个模块中(或者至少该模块是我自己的解决方案的一部分),我知道如何将 AngularJS 服务注入(inject)到 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并升级第 3 方服务的提供者 - $translate。像这样:

ajs-upgraded-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 $injector 注册 $translate 服务。

在Angular模块中注册升级后的provider

现在确保新升级的 $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);
});
}
}

关于angularjs - 如何在 Angular(2 或 4)中使用第 3 方 AngularJS(1.6)模块( Angular 翻译),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44545040/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com