使用 Web Api 在 Angular 2 应用程序中处理不同的市场（语言/区域设置）

Question

我可以使用一些建议来处理我的 Angular 2 应用程序中的不同市场。我的意思是一个新市场（比如德国市场），其中语言是德语，例如。现在，我已经对 html 中的文本（英文 ofc）进行了硬编码，以方便自己使用。

您在此处看到的示例：

<div class="row">
   <h2>Booking number: {{bookingNumber}}</h2>                           
   Your changes has been confirmed.                                                
</div>

我已经阅读了有关 angular 2 中管道的一些内容，我想我应该使用类似的东西。我的问题是，我真的不知道从哪里开始。 已经在 Visual Studio 2015 中创建了一个 Web Api 应用程序，我可以使用和调用它。

我正在考虑在我的 Web Api 项目中制作两个列表（一个用于英语，一个用于德语），但仍然应该有某种指标。我的意思是这样的：

BOOKING_NUMBER_TEXT, 'the text in english or german'
CONFIRMATION_TEXT, 'the text...'

该列表应该有两个参数，例如字符串字符串或类似的东西..知道我该怎么做吗？

从我的 angular 2 应用程序中，我正在考虑调用 api 并给它一个 id（数字，比如说 1 和 2，其中 1 = 英语，2 = 德国） 我的 Web Api 找到正确的列表并将其作为 JSON 发送回来。

然后我猜想建立一个我自己的管道，我可以过滤我在 html 中设置的单词。我正在考虑类似的事情：

<div class="row">
   <h2>{{BOOKING_NUMBER_TEXT | 'PIPE NAME' }}: {{bookingNumber}}</h2>                           
   {{CONFIRMATION_TEXT | 'PIPE NAME' }}.                                                
</div>

所以当它的名称为 BOOKING_NUMBER_TEXT 时，它应该查看具有列表对象的管道，并从右侧取出文本并将其放置。

这是一个好计划吗？或者你能给点建议吗？ （我不想使用任何 translate angular 2 框架，因为我必须在每个市场上做不同的事情）

干杯:)

更新

好的.. 我创建了一些测试数据并允许通过我的 Web Api 发送它。这是它的外观。

public Dictionary<string, string> createEnglishLocaleKeys()
    {
        Dictionary<string, string> Locale_EN = new Dictionary<string, string>();

        // Account Component
        Locale_EN.Add("ACCOUNT_LOGIN_TEXT", "Login");
        Locale_EN.Add("ACCOUNT_LOGOUT_TEXT", "Logout");

        // Booking Component
        Locale_EN.Add("BOOKING_ACTIVE_HEADER_TEXT", "ACTIVE BOOKINGS");
        Locale_EN.Add("BOOKING_LOADING_TEXT", "Loading bookings");
        Locale_EN.Add("BOOKING_NONACTIVE_HEADER_TEXT", "NON ACTIVE BOOKINGS");
        Locale_EN.Add("BOOKING_NOPREBOOKING_TEXT", "You currently do not have any previous bookings");

        // Booking List Component
        Locale_EN.Add("BOOKING_LIST_BOOKINGNUMBER_TEXT", "Booking number");
        Locale_EN.Add("BOOKING_LIST_LEAVING_TEXT", "Leaving");
        Locale_EN.Add("BOOKING_LIST_RETURNING_TEXT", "Returning");
        Locale_EN.Add("BOOKING_LIST_ROUTE_TEXT", "Route");
        Locale_EN.Add("BOOKING_LIST_PASSENGERS_TEXT", "Passengers");
        Locale_EN.Add("BOOKING_LIST_VEHICLETYPE_TEXT", "Vehicle type");

        // Menu Component

        // Passenger Component

        // DepartureDate Component

        // Confirmation Component

        Locale_EN.Add("KEY_NOT_FOUND", "KEY NOT FOUND");

        return Locale_EN;
    }

已经创建了一个 LocaleController，它以字符串语言环境“EN”或“DE”作为参数。然后我为控制器注入一个服务，它将根据语言环境字符串选择要运行的方法（现在我只发回 LocaleEN 字典）。

如何在我的 Angular 2 应用程序中创建一个默认值应该是 EN 并且应该可以更改的值？

通过可更改，您应该能够在 URL 或某种形式中设置它，例如：

localhost:3000/amendment?locale=DE

Answer 1

这里有几件事：

• 您可以通过 HTTP 内容协商 Conneg - 请参阅此链接：http://restlet.com/blog/2015/12/10/understanding-http-content-negotiation/) 和 Accept-Language 来告诉服务器要返回哪些消息。
• 在显示屏幕之前，您需要等待消息出现，例如：<div ngIf="messages">…</div>
• 如果消息在映射（键/值）中定义，我认为您不需要实现管道来显示消息：{{messages['SOME_KEY']}}
• 如果消息对应于列表，则可以像这样实现和使用自定义过滤管道：{{messages | key:'SOME_KEY'}}

这个管道的实现可能是：

@Pipe({name: 'key'})
export class KeyPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    // Assuming the message structure is:
    // { key: 'SOME_KEY', value: 'some message' }
    return value.find((message) => {
      return (message.key === args[0]);
    });
  }
}