好资源导航 » 文章资讯 » 详解使用angular-cli发布i18n多国语言Angular应用

详解使用angular-cli发布i18n多国语言Angular应用

2024-02-22 23:00:04 57

在模板html标签中增加i18n

Helloworld!

使用ng命令产生xlf格式的message.xlf文件

$ngxi18n--output-pathsrc/i18n

命令执行后，生成src/i18n/messages.xlf文件






HelloWorld!

复制message.xlf,message.en.xlf(英文版本)message.zh.xlf中文版本






HelloWorld!
HelloWorld!






HelloWorld!
哈喽，世界！

$ngserve--aot\
--i18n-file=src/i18n/messages.zh.xlf\
--locale=zh\
--i18n-format=xlf

现在浏览，显示的是中文版本

$forlanginenzh;do\
ngbuild--output-path=dist/$lang\
--aot\
-prod\
--bh/$lang/\
--i18n-file=src/i18n/messages.$lang.xlf\
--i18n-format=xlf\
--locale=$lang;\
done

这个命令执行完毕后，生成了en和zh两种语言版本。http://localhost:4200/en访问英文版本，http://localhost:4200/zh访问中文版本。--bh指定默认版本，http://localhost:4200访问时，跳转到默认版本。

修改package.json文件，加入脚本

{
[...]
"scripts":{
[...]
"build-i18n":"forlanginenzh;dongbuild--output-path=dist/$lang--aot-prod--bh/$lang/--i18n-file=src/i18n/messages.$lang.xlf--i18n-format=xlf--locale=$lang;done"
}
[...]
}

这样就可以执行npmrunbuild-i18n命令，一次build多个语言版本了。

windows用户命令

>ngbuild--output-path=dist/zh--aot-prod--bh/zh/--i18n-file=src/i18n/messages.zh.xlf--i18n-format=xlf--locale=zh
>ngbuild--output-path=dist/en--aot-prod--bh/en/--i18n-file=src/i18n/messages.en.xlf--i18n-format=xlf--locale=en

package.json脚本

"scripts":{
"build-i18n:es":"ngbuild--output-path=dist/zh--aot-prod--bh/zh/--i18n-file=src/i18n/messages.zh.xlf--i18n-format=xlf--locale=zh",
"build-i18n:en":"ngbuild--output-path=dist/en--aot-prod--bh/en/--i18n-file=src/i18n/messages.en.xlf--i18n-format=xlf--locale=en",
"build-i18n":"npmrunbuild-i18n:en;npmrunbuild-i18n:zh"
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

详解使用angular-cli发布i18n多国语言Angular应用

热门推荐

随机推荐