Angular ngx-translate - 如何为翻译值中缺少的参数设置默认值

Question

我希望翻译值中的预期参数有一个默认值，以防程序员不提供。

例如，对于en.json这个键：

"NoRecordsWereFound": "No matching {{records}} were found for your search.",

在 HTML 中，当提供records参数时，如下所示：

<span>
    {{('NoRecordsWereFound' | translate:{ records: 'books' })}}
</span>

我将进入浏览器：

没有找到符合您搜索条件的图书。

但是如果不提供参数，就像这里：

<span>
    {{'NoRecordsWereFound' | translate}}
</span>

而不是得到这个：没有找到匹配的{{records}}为您的搜索找到。

我会得到一些默认值，比如：

没有为您的搜索找到匹配的defaultValue 。

是否可以？ 谢谢！

Answer 1

Ngx-translate 没有提供这样的功能，但你在 Angular 中有很多选择来实现这一点。 以下是一些建议：

1. *ngIf 的使用

您可以使用 *ngIf 来引用不同的翻译：

<span *ngIf="books">
    {{('NoRecordsWereFound' | translate:{ records: books })}}
</span>
<span *ngIf="!books">
    {{('NoRecordsWereFound Default' | translate )}}
</span>

2. 在 init 或错误状态设置默认值

您始终可以在组件的 init 上设置默认值，或者如果您进行了某些方法调用，则可以为错误响应设置默认值。

@Component({
  selector: 'my-app',
  template: `
   <span>
    {{('NoRecordsWereFound' | translate:{ records: books })}}
   </span>
  `,
})
export class AppComponent  {
  books = 'default value';
}

您还可以使用商店为不同的场景设置默认状态。