详解使用angular

详解使用angular

在模板html标签中增加i18n

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

$ ng xi18n --output-path src/i18n

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

Hello World!

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

Hello World!

Hello World!

Hello World!

哈喽，世界！

$ ng serve --aot \

--i18http://n-file=src/i18n/messages.zh.xlf \

--locale=zh \

--i18n-format=xlf

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

$ for lang in en zh; do \

ng build --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": "for lang in en zh; do ng build --output-path=dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done"

}

[...]

}

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

windows用户命令

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

> ng build --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": "ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh",

"build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.ehttp://n.xlf --i18n-format=xlf --locale=en",

"build-i18n": "npm run build-i18n:en ; npm run build-i18n:zh"

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。