Angular 角度：在组件中使用转换管道的最优雅、最短的方法（TS代码）

所以，我有一个翻译管，这是很难解释的

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');
      ....
    }

---

任何好的建议

我只是用不同的语言构建了一个应用程序，我可以强烈推荐ngs翻译模块：

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

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

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

在模板中，您可以调用：

{{‘你好’|翻译}

它会打印出来： 欢迎参加我的申请

---

我知道这并不完全是您所要求的，但我希望它对您有所帮助

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

这是一个正确设计管道的示例。以编程方式获取转换的正确方法是直接调用服务，类似于管道转换方法中的操作：

它每次都需要使用Lodash get并直接访问存储，这一事实表明，该服务没有使用get方法来保持其干燥并封装存储。它应该被重构为

return translationService.getWithOptionalFallback(value, args);

在管道中，以及

translatedValue = translationService.getWithOptionalFallback(value);

其他任何地方

---

只有当第三方管道设计不当，并且包含无法以另一种方式（即角度内置管道）访问的功能时，才适合使用编程管道访问。在这种情况下，将手动实例化管道类并调用transform方法。此用法未记录在案，可能无法按预期工作或根本无法工作，具体取决于特定管道。

我猜您以错误的方式使用管道，请访问以下链接您猜错了@Nour。。。我们正在以正确的方式使用视图中的管道。。。我们还必须在组件代码中进行翻译。。。。我们希望重用相同的逻辑…在任何地方使用管道，但视图不是正确的方式。您已经有了相同的逻辑可以重用。这是翻译服务。看看答案。这不是我想要的。。。我们正在以类似的方式使用转换管道。。。我们只需要一种重用视图中使用的管道逻辑的方法。。。。在组件中重用它

translatedValue = translationService.getWithOptionalFallback(value);