时间戳

首页 > 解决方案 > 带有选择的属性的角度 i18n

angular - 带有选择的属性的角度 i18n

问题描述

我有一个我想使用 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>

我错过了什么吗？

标签： angularangular-materialangular-i18n

解决方案

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

与 不同ng-template的是，隐藏的元素并不总是不显眼，例如mat-select触发值使用 mat-option's 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'
  }
}

推荐阅读