Question

我有一个要使用i18n从angular转换的元素。我要翻译的部分是matTooltip，但值是一个select。我知道我必须使用i18n-matTooltip使其起作用。我应该在文档中使用此语法<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>，但这样做却出错。

Uncaught Error: Template parse errors:
Parser Error: Missing expected : at column 9 in [{section.addTooltip, 
select, test {test} test2 {test2} test3 {test3}}] in 
ng:///AppModule/TestComponent.html@34:72 ("
    </div>

这是我的元素的样子：

<button mat-flat-button (click)="click()" 
    [matTooltip]="{section.addTooltip, select, test {test} test2 {test2} test3 
    {test3}}" matTooltipPosition="above" i18n-matTooltip>

我想念什么吗？

Answer 1

我遇到了完全相同的问题，要将i18n插值到matTooltip中，您必须创建一个隐藏的HTML元素以执行i18n并将reference.innerText作为工具提示值（找到here）传递。这看起来像是骇客，但Angular Components团队has decided不支持ng-template作为有效输入值。

与ng-template不同的是，隐藏元素不会总是保持不显眼，例如mat-select触发值uses mat-option的{{1}}，因此如果您将工具提示或带有工具提示的元素放入textContent中，整个工具提示文本将在触发器中可见。可以通过猴子补丁指令或影子DOM的战术使用来解决此问题。

See working example at StackBlitz。

mat-option

<button
  [matTooltip]='template.innerText'
  (click)='changeValue()'
>Click to change value</button>
Value: {{value}}
<template
  #template
  i18n='@@foo'
>Value is {value, select, true {truthy} false {falsy} }</template>

Angular i18n用于带有select的属性

1 个答案: