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 上设置默认值，或者如果您执行了某些方法调用，则可以为错误响应设置默认值。

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

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