Question

所以，我有一个翻译管道，很容易解释

import { TranslationService } from 'app/services/translation.service';
const getByKey = require('lodash.get');

@Pipe({
  name: 'translate'
})
export class TranslatePipe implements PipeTransform {

  constructor(public _translation: TranslationService) {}

  transform(value: string, args?: string): string {
    return getByKey(this._translation.store, value) || args;
  }
}

我想要的是在我的组件中使用这个管道，但我希望它优雅而不是太突兀

不想最终得到这样的代码：

constructor(private _T: TranslatePipe) {
  ....
  this.testText = this._T.transform('mylong.andlengthy.section.key', 'Fall back english text');
  ....
}

我想要的是做一些像

这样的事情

const _T = require('app/pipes/translate.pipe)'; // or something that would work with import

在顶部

然后像

一样使用它

constructor() {
      ....
      this.testText = _T('mylong.andlengthy.section.key', 'Fall back english text');
      ....
    }

任何好的建议

Answer 1

我只是用不同的语言构建一个应用程序，我强烈推荐使用ngs-translation模块： https://github.com/ngx-translate/core

它非常易于使用，您可以在GitHub上找到所有文档。

将所有翻译存储在.json文件中的键值对中。例如：

{
  "HELLO": "Welcome to my application"
}

在您的模板中，您可以致电：

<div>{{ 'HELLO' | translate }}</div>

它会打印出来： <div>Welcome to my application</div>

我知道那不是你要求的，但我希望它对你有帮助

Answer 2

管道应该用在组件模板中。正确设计的管道应该是底层服务的浅层包装器，如果需要还可以提供视图特定的功能，例如更改检测。

这是设计合理的管道的一个例子。以编程方式获取翻译的正确方法是直接调用服务，类似于管道transform方法中的操作：

const getByKey = require('lodash.get');
...
translatedValue = getByKey(translationService.store, value);

每次需要使用Lodash get并直接访问store这一事实表明该服务错过get方法以保持DRY并封装store。它应该被重构为

return translationService.getWithOptionalFallback(value, args);

在管道中，

translatedValue = translationService.getWithOptionalFallback(value);

其他任何地方。

程序化管道访问的唯一时间是第三方管道没有正确设计并包含以其他方式无法达到的功能（即Angular内置管道）。在这种情况下，管道类被手动实例化，并调用transform方法。此用法未记录，可能无法按预期工作或根本无法工作，具体取决于特定的管道。

Angular：在组件中使用转换管道的最优雅，最短的方式（TS代码）

2 个答案: