可運行代碼如下：
<!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.js"></script> </head> <body> <div> <h1>{{ 'Hello' | translate }}</h1> <span translate='what? A dog.'></span> </div> <script type="text/javascript"> var app = angular.module("MyApp",['pascalprecht.translate']); app.config(['$translateProvider',function($translateProvider){ $translateProvider.translations('en',{ 'Hello':'Hello', 'what? A dog.':'what? A dog.' }); $translateProvider.translations('zh',{ 'Hello':'你好', 'what? A dog.':'神馬？這是一只旺財！' }); $translateProvider.preferredLanguage('zh'); }]); </script> </body> </html>
注意：使用translate的兩種常見方式，
- Create a
pipethat we can use to translate our words in the HTML view. Like this:
<!-- should display 'hola mundo' when translate to Spanish --> <p>{{ 'hello world' | translate }}</p>- Create a
servicethat we can use to translate our words in JS / Typescript. Like this:
... // should display 'hola mundo' when translated to Spanish this.translatedText = this.translate.instant('hello world'); // this.translate is our translate service ...
第二種方式方便直接在ts文件中使用！不過翻譯的東西依然是在$translateProvider.translations
里！
參考：https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1