javascript - Angular 4 和 ngx-translate：避免模板中相同键的翻译管道重复

Question

我在使用 ngx-translate 的 Angular 4 应用程序的模板中有以下代码

<a [routerLink]="['birthdays']" [title]="'birthdays.title' | translate">
{{ 'birthdays.title' | translate }}
</a>

这很完美。但我必须复制检索“birthdays.title”翻译的代码。有没有办法在模板中将其设置为变量并使用该变量？

类似的东西（伪代码）：

<a [routerLink]="['birthdays']" [title]="'birthdays.title' | translate as title">
{{ title }}
</a>

Answer 1

我认为这不是必需的，但您可以在.ts中创建一个 get 变量，然后在 html 中使用该变量：

// This is needed because translate get is async :(
birthdayString: string = '';

ngAfterViewInit() {
    this.translate.get('birthdays.title')
        .subscribe(value => { this.birthdayString = value; })
}

get birthdayText() {
    return birthdayString;
}

在你的 html 文件中：

<a [routerLink]="['birthdays']" [title]="birthdayText">
    {{ birthdayText }}
</a>