https://guoxicheng.top/assets/angular-i18n.html-Db1z6LYH.js

1import{_ as k}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as p,b as t,a as d,w as n,r,o as g,d as s,e as a}from"./app-54opvbZ2.js";const B={};function y(c,i){const e=r("CodeTabs");return g(),p("div",null,[i[4]||(i[4]=t(`<h1 id="多国语系设置" tabindex="-1"><a class="header-anchor" href="#多国语系设置"><span>多国语系设置</span></a></h1><h2 id="读取浏览器设置语言" tabindex="-1"><a class="header-anchor" href="#读取浏览器设置语言"><span>读取浏览器设置语言</span></a></h2><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" data-title="ts" style="--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes github-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#E5C07B;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> (</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">localStorage</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;currentLanguage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) </span></span>
2<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;">    ||</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;"> window</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">navigator</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">language</span><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;"> ||</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;zh&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;zh&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="安装依赖" tabindex="-1"><a class="header-anchor" href="#安装依赖"><span>安装依赖</span></a></h2><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes github-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> @ngx-translate/core</span><span style="--shiki-light:#005CC5;--shiki-dark:#D19A66;"> --save</span></span>
3<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> @ngx-translate/http-loader</span><span style="--shiki-light:#005CC5;--shiki-dark:#D19A66;">  --save</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="在-app-module-ts-导入" tabindex="-1"><a class="header-anchor" href="#在-app-module-ts-导入"><span>在 <code>app.module.ts</code> 导入</span></a></h2><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" data-title="ts" style="--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34;">

3<pre class="shiki shiki-themes github-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// 自定义的语言处理</span></span>
4<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">HttpClientModule</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@angular/common/http&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
5<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">HttpClient</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@angular/common/http&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
6<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">TranslateModule</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">TranslateLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@ngx-translate/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
7<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">TranslateHttpLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@ngx-translate/http-loader&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
8<span class="line"></span>
9<span class="line"><span style="--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">// https://github.com/ngx-translate/core</span></span>
10<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;"> createTranslateLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;">http</span><span style="--shiki-light:#D73A49;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#E5C07B;"> HttpClient</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) {</span></span>
11<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">  return</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;"> TranslateHttpLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">http</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;assets/i18n/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;.json&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">);</span></span>
12<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">}</span></span>
13<span class="line"></span>
14<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">@</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">NgModule</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">

14({</span></span>
15<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">  imports</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: [</span></span>
16<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">    TranslateModule</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">forRoot</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">({</span></span>
17<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">      loader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: {</span></span>
18<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">        provide</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">TranslateLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">,</span></span>
19<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">        useFactory</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: (</span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">createTranslateLoader</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">),</span></span>
20<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">        deps</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: [</span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">HttpClient</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">]</span></span>
21<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">      }</span></span>
22<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">    })</span></span>
23<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">  ]</span></span>
24<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">});</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="添加自定义语言包" tabindex="-1"><a class="header-anchor" href="#添加自定义语言包"><span>添加自定义语言包</span></a></h2><p>在 <code>assets</code> 文件夹下新建 <code>i18n/*.json</code></p>`,9)),d(e,{id:"21",data:[{id:"zh-CN.json"},{id:"en-US.json"}]},{title0:n(({value:l,isActive:h})=>[...i[0]||(i[0]=[a("zh-CN.json",-1)])]),title1:n(({value:l,isActive:h})=>[...i[1]||(i[1]=[a("en-US.json",-1)])]),tab0:n(({value:l,isActive:h})=>[...i[2]||(i[2]=[s("div",{class:"language-json line-numbers-mode","data-highlighter":"shiki","data-ext":"json","data-title":"json",style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"}},[s("pre",{class:"shiki shiki-themes github-light one-dark-pro vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},"{")]),a(`
25`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"delete"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"删除"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
26`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"generate compressed code"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"生成压缩码"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
27`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"download"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"下载"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
28`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"file"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"文件"')]),a(`
29`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},"}")])])]),s("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"})])],-1)])]),tab1:n(({value:l,isActive:h})=>[...i[3]||(i[3]=[s("div",{class:"language-json line-numbers-mode","data-highlighter":"shiki","data-ext":"json","data-title":"json",style:{"--shiki-light":"#24292e","--shiki-dark":"#abb2bf","--shiki-light-bg":"#fff","--shiki-dark-bg":"#282c34"}}

29,[s("pre",{class:"shiki shiki-themes github-light one-dark-pro vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},"{")]),a(`
30`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"delete"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"Delete"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
31`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"generate compressed code"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"Generate compressed code"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
32`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"download"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"Download"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},",")]),a(`
33`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#E06C75"}},'	"file"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},": "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#98C379"}},'"File"')]),a(`
34`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#ABB2BF"}},"}")])])]),s("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"})])],-1)])]),_:1}),i[5]||(i[5]=t(`<h2 id="在-app-component-ts-中初始化" tabindex="-1"><a class="header-anchor" href="#在-app-component-ts-中初始化"><span>在 <code>app.component.ts</code> 中初始化</span></a></h2><div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" data-title="ts" style="--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes github-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">OnInit</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@angular/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
35<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> { </span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">TranslateService</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;@ngx-translate/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
36<span class="line"></span>
37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">@</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">Component</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">({</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">  selector</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">,</span></span>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">  templateUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;./app.component.html&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">,</span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">  styleUrls</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;./app.component.scss&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">]</span></span>
41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">})</span></span>
42<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#E5C07B;"> AppComponent</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> implements</span><span style="--shiki-light:#6F42C1;--shiki-dark:#E5C07B;"> OnInit</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> {</span></span>
43<span class="line"></span>
44<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">  constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span></span>
45<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">    public</span><span style="--shiki-light:#E36209;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> translate</span><span style="--shiki-light:#D73A49;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#E5C07B;"> TranslateService</span></span>
46<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">  ) {</span></span>
47<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">    </span></span>
48<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">  }</span></span>
49<span class="line"></span>
50<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">  async</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;"> ngOnInit</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">() {</span></span>
51<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">    const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;"> lang</span><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;"> (</span></span>
52<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">        localStorage</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;currentLanguage&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;">

52||</span><span style="--shiki-light:#005CC5;--shiki-dark:#E5C07B;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">translate</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">getBrowserCultureLang</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#56B6C2;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;&#39;</span></span>
53<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">    ).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">includes</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;zh&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;zh&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
54<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">    </span></span>
55<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">    switch</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E06C75;">lang</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">) {</span></span>
56<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">      case</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;zh&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">:</span></span>
57<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#E5C07B;">        this</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">translate</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;zh-CN&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">);</span></span>
58<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">        break</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
59<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">      case</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;"> &#39;en&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">:</span></span>
60<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#E5C07B;">        this</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">translate</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;en-US&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">);</span></span>
61<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">        break</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
62<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">      default</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">:</span></span>
63<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#E5C07B;">        this</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E5C07B;">translate</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#61AFEF;">

63use</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&#39;en-US&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">);</span></span>
64<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#C678DD;">        break</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">;</span></span>
65<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">    }</span></span>
66<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">  }</span></span>
67<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用多国语言" tabindex="-1"><a class="header-anchor" href="#使用多国语言"><span>使用多国语言</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" data-title="html" style="--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes github-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#D19A66;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&quot;#&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&gt;{{ &#39;download&#39; | translate }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&gt;</span></span>
68<span class="line"></span>
69<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#D19A66;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&quot;#&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#D19A66;"> [title]</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#98C379;">&quot;&#39;name&#39; | translate&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&gt;title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#E06C75;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4))])}const F=k(B,[["render",y],["__file","angular-i18n.html.vue"]]),A=JSON.parse(`{"path":"/develop/angular/angular-i18n.html","title":"多国语系设置","lang":"zh-CN","frontmatter":{"date":"2023-10-18T00:00:00.000Z","description":"多国语系设置 读取浏览器设置语言 安装依赖 在 app.module.ts 导入 添加自定义语言包 在 assets 文件夹下新建 i18n/*.json 在 app.component.ts 中初始化 使用多国语言","head":[["meta",{"property":"og:url","content":"https://guoxicheng.top/develop/angular/angular-i18n.html"}],["meta",{"property":"og:site_name","content":"Guo's Page"}],["meta",{"property":"og:title","content":"多国语系设置"}],["meta",{"property":"og:description","content":"多国语系设置 读取浏览器设置语言 安装依赖 在 app.module.ts 导入 添加自定义语言包 在 assets 文件夹下新建 i18n/*.json 在 app.component.ts 中初始化 使用多国语言"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}

69],["meta",{"property":"og:updated_time","content":"2024-03-03T14:41:02.000Z"}],["meta",{"property":"article:published_time","content":"2023-10-18T00:00:00.000Z"}],["meta",{"property":"article:modified_time","content":"2024-03-03T14:41:02.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"多国语系设置\\",\\"image\\":[\\"\\"],\\"datePublished\\":\\"2023-10-18T00:00:00.000Z\\",\\"dateModified\\":\\"2024-03-03T14:41:02.000Z\\",\\"author\\":[]}"]]},"headers":[{"level":2,"title":"读取浏览器设置语言","slug":"读取浏览器设置语言","link":"#读取浏览器设置语言","children":[]},{"level":2,"title":"安装依赖","slug":"安装依赖","link":"#安装依赖","children":[]},{"level":2,"title":"在 app.module.ts 导入","slug":"在-app-module-ts-导入","link":"#在-app-module-ts-导入","children":[]},{"level":2,"title":"添加自定义语言包","slug":"添加自定义语言包","link":"#添加自定义语言包","children":[]},{"level":2,"title":"在 app.component.ts 中初始化","slug":"在-app-component-ts-中初始化","link":"#在-app-component-ts-中初始化","children":[]},{"level":2,"title":"使用多国语言","slug":"使用多国语言","link":"#使用多国语言","children":[]}],"git":{"createdTime":1692367881000,"updatedTime":1709476862000},"readingTime":{"minutes":0.81,"words":244},"filePathRelative":"develop/angular/angular-i18n.md","localizedDate":"2023年10月18日","autoDesc":true,"excerpt":"\\n<h2>读取浏览器设置语言</h2>\\n<div class=\\"language-ts line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"ts\\" data-title=\\"ts\\" style=\\"--shiki-light:#24292e;--shiki-dark:#abb2bf;--shiki-light-bg:#fff;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes github-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#D73A49;--shiki-dark:#C678DD\\">const</span><span style=\\"--shiki-light:#005CC5;--shiki-dark:#E5C07B\\"> lang</span><span style=\\"--shiki-light:#D73A49;--shiki-dark:#56B6C2\\"> =</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\"> (</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#E5C07B\\">localStorage</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">.</span><span style=\\"--shiki-light:#6F42C1;--shiki-dark:#61AFEF\\">getItem</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">(</span><span style=\\"--shiki-light:#032F62;--shiki-dark:#98C379\\">'currentLanguage'</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">) </span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#D73A49;--shiki-dark:#56B6C2\\">    ||</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#E5C07B\\"> window</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">.</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#E5C07B\\">navigator</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">.</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#E06C75\\">language</span><span style=\\"--shiki-light:#D73A49;--shiki-dark:#56B6C2\\"> ||</span><span style=\\"--shiki-light:#032F62;--shiki-dark:#98C379\\"> ''</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">).</span><span style=\\"--shiki-light:#6F42C1;--shiki-dark:#61AFEF\\">includes</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">(</span><span style=\\"--shiki-light:#032F62;--shiki-dark:#98C379\\">'zh'</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">) </span><span style=\\"--shiki-light:#D73A49;--shiki-dark:#C678DD\\">?</span><span style=\\"--shiki-light:#032F62;--shiki-dark:#98C379\\"> 'zh'</span><span style=\\"--shiki-light:#D73A49;--shiki-dark:#C678DD\\"> :</span><span style=\\"--shiki-light:#032F62;--shiki-dark:#98C379\\"> 'en'</span><span style=\\"--shiki-light:#24292E;--shiki-dark:#ABB2BF\\">;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}`);export{F as comp,A as data};