[英]Angular i18n for attributes with select
I have an element I want to translate using i18n from angular.我有一个元素,我想从 angular 使用 i18n 进行翻译。 The part that I want to translate is the matTooltip but the value is a select.
我想翻译的部分是 matTooltip 但值是一个选择。 I know that I have to use
i18n-matTooltip
to make it work.我知道我必须使用
i18n-matTooltip
才能使其工作。 I should use this syntax <span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
from the docs but I get an error doing so.我应该使用这个语法
<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>
This is what my element looks like:这是我的元素的样子:
<button mat-flat-button (click)="click()"
[matTooltip]="{section.addTooltip, select, test {test} test2 {test2} test3
{test3}}" matTooltipPosition="above" i18n-matTooltip>
Am I missing something?我错过了什么吗?
I had exactly the same issue, to interpolate i18n into matTooltip
you have to create a hidden HTML element to perform i18n in and pass reference.innerText
as tooltip value (found here ).我遇到了完全相同的问题,要将 i18n 插入
matTooltip
您必须创建一个隐藏的 HTML 元素来执行 i18n 并将reference.innerText
作为工具提示值传递(在这里找到)。 This looks like a hack, but Angular Components team has decided not to support ng-template
as a valid input value.这看起来像一个 hack,但 Angular Components 团队决定不支持
ng-template
作为有效的输入值。
Unlike ng-template
, the hidden element won't always stay unnoticeable, for example mat-select
trigger value uses mat-option
's textContent
, so if you put tooltip or element with tooltip into mat-option
, whole tooltip text will be visible in trigger.与
ng-template
不同,隐藏元素不会总是不显眼,例如mat-select
触发器值使用mat-option
的textContent
,因此如果您将工具提示或带有工具提示的元素放入mat-option
,则整个工具提示文本将可见在触发器中。 This can be worked around with a mat-select-trigger
and custom trigger text.这可以通过
mat-select-trigger
和自定义触发文本来解决。
See working example at StackBlitz .请参阅 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'
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.