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 中创建一个变量，然后在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>