Ag Grid Localisation 本地化

Vue Data Grid: Localisation

Localisation 本地化

网格中所有显示的文本都是可定制的，以达到本地化的目的。这是通过为网格提供所需语言的定位信息来实现的。你可以通过 localeText属性提供一个键/值对的对象，或者提供一个 getLocaleText回调，将网格与你的应用程序的本地化联系起来。

• localeText: { [key: string]: string }
  • 一个键->值对的map对象，用于在网格内定位文本。
• getLocaleText: Function
  • 一个回调，用于在网格内对文本进行本地化。

getLocaleText = (
    params: GetLocaleTextParams<TData>
) => string;

interface GetLocaleTextParams<TData = any> {
  key: string;
  defaultValue: string;
  variableValues?: string[];
  // The grid api. 
  api: GridApi<TData>;
  // The column api. 
  columnApi: ColumnApi;
  // Application context as set on `gridOptions.context`. 
  // 在`gridOptions.context`上设置的应用环境。
  context: any;
}

网格的默认语言是美国英语。该网格不附带其他地区的语言。如果你想提供另一种语言的网格，你必须向网格提供相关的地域信息。

Creating a Locale 创建语言环境

默认情况下，该网格不需要语言环境。如果没有提供语言环境，网格将默认为英语。如果提供了语言环境但缺少数值，缺失的数值将使用默认的英语。

下面提供了一个完整的语言环境文件示例。 要支持其他语言，第一步是复制此文件并将值翻译成所需的语言。
前往官网查看并下载

所有网格都有一个语言环境文件。 该文件涵盖了所有 AG Grid Enterprise 和 AG Grid Community 的所有模块。 这样做是有目的的，因为每个模块都有多个文件会造成很多混乱。我们决定在一个文件中保持简单。

Installing a Locale 安装语言环境

要想在网格中安装语言环境，就把语言环境对象设置为网格的 localeText属性。下面的例子显示了这一操作：

下面的例子显示了安装语言环境文件。这个例子有两个本地文件 locale.en.js和 locale.zz.js。第二个文件是一个假的语言环境，它只是在每个值的开头加上"zzz"。这样做是为了让这个例子看起来不同–否则就会像平常一样显示英语，而且由于英语是默认的，所以没有办法知道这个语言环境是否生效。

在这个示例中，尝试如下：

1. 在 Plunker 中打开。
2. 通过将 localeText = AG_GRID_LOCALE_ZZZ更改为 localeText = AG_GRID_LOCALE_EN，将语言环境更改为英语。
3. 编辑 locale.en.js的值，并观察网格的变化。

查看示例：Localisation

一些本地化变量中包含 ${variable}。 发生这种情况时，意味着字符串的一部分将被替换为变量值。

Changing Locale 更改语言环境

网格根据需要使用语言环境。 它不会随着区域设置的更改而刷新。 如果您的应用程序允许更改应用程序的语言环境，您必须销毁并重新创建网格以使其使用新的语言环境。

Locale Callback 语言环境回调

为网格提供地域性并不适合本地化库或更广泛的应用的本地化。如果你想让网格从一个应用范围内的本地化中获取，那么就实现 getLocaleText，作为网格和应用本地化之间的桥梁。

下面的示例显示了为网格的本地化提供回调。为了简单起见，这个例子只是返回大写的默认值。在实际应用程序中，回调将使用应用程序的本地化。

查看示例：Callback

在实际应用程序中，回调看起来像这样：

const getLocaleText = (params) => {
    // to avoid key clash with external keys, we add 'grid' to the start of each key.
    // 为了避免与外部按键发生冲突，我们在每个按键的开头加上'grid'
    const gridKey = 'grid.' + params.key;

    // look the value up using an application wide service
    // 使用应用程序范围内的服务查询该值
    return applicationLocaleService(gridKey);
}