带有选择的属性的 Angular i18n

Question

我有一个元素，我想从 angular 使用 i18n 进行翻译。 我想翻译的部分是 matTooltip 但值是一个选择。 我知道我必须使用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作为工具提示值传递（在这里找到）。 这看起来像一个 hack，但 Angular Components 团队决定不支持ng-template作为有效的输入值。

与ng-template不同，隐藏元素不会总是不显眼，例如mat-select触发器值使用mat-option的textContent ，因此如果您将工具提示或带有工具提示的元素放入mat-option ，则整个工具提示文本将可见在触发器中。 这可以通过mat-select-trigger和自定义触发文本来解决。

请参阅 StackBlitz 上的工作示例。

<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>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  value = 'true'
  changeValue() {
    this.value = this.value === 'true' ? 'false' : 'true'
  }
}