angular2-notifications结合i18n实现多语言通知的技术咨询

我之前也处理过类似的需求，结合Angular的国际化工具（比如ngx-translate）和angular2-notifications的特性，完全可以轻松搞定多语言通知。下面是具体的实现步骤：

1. 确保你的项目已配置好国际化工具 #

假设你用的是Angular生态中最常用的ngx-translate，如果还没完成基础配置，先搞定TranslateModule的导入、翻译文件的设置这些前置工作。

2. 在组件中注入依赖服务 #

首先在你的组件类里注入TranslateService和NotificationsService，这样才能获取翻译文本并触发通知：

import { TranslateService } from '@ngx-translate/core';
import { NotificationsService } from 'angular2-notifications';

@Component({
  // 你的组件配置项
})
export class YourComponent {
  constructor(
    private notif: NotificationsService,
    private translate: TranslateService
  ) {}

  // ...其他业务代码
}

3. 修改通知调用逻辑，结合国际化 #

3.1 基础静态文本翻译 #

如果通知内容是固定的，直接用translate.get()获取对应语言的翻译文本，再传入通知组件即可：

saveUser(user){
  // 先获取翻译后的成功提示文本
  this.translate.get('NOTIFICATIONS.USER_CREATE_SUCCESS').subscribe(translation => {
    this.notif.success(
      translation,
      {
        timeOut: 3000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: true,
        maxLength: 50
      }
    );
  });
}

对应的翻译文件（比如en.json）中要添加匹配的键值对：

{
  "NOTIFICATIONS": {
    "USER_CREATE_SUCCESS": "Yeahhh successful create notification"
  }
}

3.2 带动态参数的翻译 #

如果通知需要展示动态内容（比如用户名），可以在翻译键中设置占位符，再传入动态参数：
翻译文件（en.json）：

{
  "NOTIFICATIONS": {
    "USER_CREATE_SUCCESS": "Yeahhh, {{username}} was created successfully!"
  }
}

组件代码修改为：

saveUser(user){
  this.translate.get('NOTIFICATIONS.USER_CREATE_SUCCESS', { username: user.name }).subscribe(translation => {
    this.notif.success(
      translation,
      {
        timeOut: 3000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: true,
        maxLength: 50
      }
    );
  });
}

4. 利用组件的html函数实现富文本多语言 #

如果你的通知需要富文本格式（比如加粗、换行），可以用组件提供的html函数，同样结合翻译逻辑：

saveUser(user){
  this.translate.get('NOTIFICATIONS.USER_CREATE_SUCCESS_HTML', { username: user.name }).subscribe(translation => {
    this.notif.html(
      translation,
      {
        timeOut: 3000,
        showProgressBar: true,
        pauseOnHover: false,
        clickToClose: true,
        maxLength: 50,
        type: 'success' // 需指定通知类型，默认是info
      }
    );
  });
}

对应的翻译文本可以包含HTML标签：

{
  "NOTIFICATIONS": {
    "USER_CREATE_SUCCESS_HTML": "<strong>Success!</strong><br>Yeahhh, {{username}} was created successfully!"
  }
}

小提示 #

• 如果你不想每次都写subscribe，可以改用translate.instant()，但要确保翻译文件已经提前加载完成（比如通过APP_INITIALIZER预加载）。
• 可以把通知的配置项抽成全局常量，避免重复编写相同的配置。

内容的提问来源于stack exchange，提问作者erdemgunenc