Question

我正在努力学习如何在Angular 2中开发和构建多语言应用程序/组件。

在Angular 1.x中，我在路由配置中做了类似的事情：

appDesktop.config([
  "$stateProvider", "$urlRouterProvider", "$locationProvider", function($stateProvider: IAppStateProvider, $urlRouterProvider: angular.ui.IUrlRouterProvider, $locationProvider: ng.ILocationProvider) {
    $urlRouterProvider.otherwise("/");
    $stateProvider.state("home_en", {
      url: "/",
      views: {
        'header': {
          templateUrl: "/AngularJs/Controllers/main/d.mainHeader_en.html",
          controller: "mainController",
          controllerAs: "main"
        },
        'content': {
          templateUrl: "/AngularJs/Controllers/main/d.mainContent_en.html"
        }
      },
      language: LanguageChoiceEnum.English,
      changeLangState: "home_es",
      title: "Welcome"
    });
    $stateProvider.state("home_es", {
      url: "/",
      views: {
        'header': {
          templateUrl: "/AngularJs/Corollers/main/d.mainHeader_es.html",
          controller: "mainController",
          controllerAs: "main"
        },
        'content': {
          templateUrl: "/AngularJs/Controllers/main/d.mainContent_es.html"
        }
      },
      language: LanguageChoiceEnum.Spanish,
      changeLangState: "home_en",
      title: "Bienvenido"
    });
    $locationProvider.html5Mode(true);
  }
]);

所以，在这个片段中，如果有人在“主页”页面（英文版）并且他们选择转到西班牙语版本，我会重定向到“home_es”状态。工作得很好。

使用Angular 2，我收集到你无法动态地为组件分配视图（或者你可以吗？）。因此，我试图找出如何完成类似的事情，并仍然保持我的代码干。任何想法将不胜感激。

Answer 1

您可以通过将language标志作为参数传递，而无需更改整个模板，而是可以使用angularJS自定义过滤器将需要翻译的文本翻译为所需的语言。

我已经在许多应用程序中实现了这种方法，它的工作方式就像魅力有关更多信息，请查看this解决方案，但该解决方案已在Angular5中实现。您也可以在AngularJS中使用此技术。

Angular 2：执行多语言应用程序/组件的策略

1 个答案: