Question

我想制作一个带有可配置，可翻译输入选项的Angular组件。

结束行为：我可以根据组件中的值向组件输入对象列表，并可以选择显示可翻译字符串。

<my-component [options]="options"></my-component>

<div class="my-component">
  <div class="option" *ngFor="let option of options">
    <span>{{ option.title }}</span>
  </div>
</div>

但是，由于我使用的是Angular的i18n指令，因此所有可翻译的内容都必须使用HTML。

Issue to have this any other way is open since 2016, so safe to say it's not coming soon。

我尝试了a ng-content approach：

interface TranslateChildOption {
  title: string;
  i18nTitle: string;
}

translatableOptions: TranslateChildOption[] = [
    { title: 'Jou 1', i18nTitle: 'selector-jou-1'},
    { title: 'Jou 2', i18nTitle: 'selector-jou-2'},
]

在父组件内部：

<translatechild [options]="translatableOptions">
  <span type="selector-jou-1">Bonjou 1</span>
  <span type="selector-jou-2">Bonjou 2</span>
</translatechild>

在子组件内部：

<div *ngFor="let item of options">
  <span>{{ item.title }}</span> | <ng-content [select]="item.i18nTitle"></ng-content>
</div>

但是显然ng-content仅用于静态内容投影，因此不能将值绑定到select属性。 It's another issue that's open from 2016。

有没有办法（理性地）做到这一点，而又不求助于骇人听闻的行为？

Answer 1

想出了点什么。这是通过@Input装饰器传递可翻译选项的折衷方案之上的折衷方案

每个希望将可翻译选项传递给组件的人都定义了一个自定义x-translator组件

使用let-x="value"语法，为翻译器提供要查找的类型。它通过<ng-template>

传递到选择器中

在选择器组件内部，通过<ng-template>循环中的ngTemplateOutlet和TemplateRef检索并渲染传递的*ngFor，并提供当前当前项目的上下文，将可翻译标签类型赋予selector-translator中*ngFor的每个实例。

在selector-translator组件内部，输入的标签类型执行*ngIf来查找要显示的可翻译html字符串

如果需要任何静态文本，可以使用<ng-content select="[type]='selector-name'" i18n></ng-content>

以html格式完成。

https://stackblitz.com/edit/angular-i18n-porno

有没有一种方法可以将可翻译字符串动态传递到Angular组件中？

1 个答案: