ng-xi18n在语言更改时不会更新所有组件

时间:2018-03-21 14:44:19

标签: angular internationalization

我正在玩ng-xi18n库,到目前为止一直很好。我用两种语言加载:英语和韩语。

当我尝试在两者之间切换时,语言只会更新login.component

我有header.componentfooter.component使用翻译,但他们不会更新。为什么呢?

更改语言的代码:

<div class="container">
  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav mode="over" [(opened)]="opened">
      Menu items
    </mat-sidenav>
    <mat-sidenav-content>
      <app-header [(opened)]="opened"></app-header>
      <div id="wrap">
        <app-login></app-login>
        <app-footer></app-footer>
      </div>
      <div id="languages" class="row">
        <a href="#" class="col" (click)="translate.use('en')">en</a>
        <a href="#" class="col" (click)="translate.use('kr')">kr</a>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

翻译文件:

en.json

{
  "HEADER": {},
  "LOGIN": {
    "TITLE": "Login",
    "USERNAME": "Username or email address",
    "PASSWORD": "Password",
    "LOST": "Lost your password?",
    "REMEMBER": "Remember Me"
  },
  "FOOTER": {
    "JOIN": "Join Our Newsletter",
    "MESSAGE": "...",
    "EMAIL": "Your email",
    "SUBSCRIBE": "Subscribe",
    "SHOP": "Shop Now",
    "ABOUT": "About us",
    "SCIENCE": "The Science",
    "FAQS": "FAQ's",
    "CONTACT": "Contact Us",
    "BLOG": "Blog",
    "SALE": "Conditions of Sale",
    "USE": "Conditions of Use",
    "PRIVACY": "Privacy Policy"
  }
}

kr.json

{
  "HEADER": {},
  "LOGIN": {
    "TITLE": "로그인",
    "USERNAME": "아이디 또는 이메일 주소",
    "PASSWORD": "암호",
    "LOST": "비밀번호를 잊어 버렸습니까?",
    "REMEMBER": "날 기억해"
  },
  "FOOTER": {
    "JOIN": "뉴스 레터 가입",
    "MESSAGE": "...",
    "EMAIL": "귀하의 이메일",
    "SUBSCRIBE": "구독하기",
    "SHOP": "지금 쇼핑하십시오",
    "ABOUT": "회사 소개",
    "SCIENCE": "과학",
    "FAQS": "FAQ's",
    "CONTACT": "연락처",
    "BLOG": "블로그",
    "SALE": "판매 조건",
    "USE": "이용 약관",
    "PRIVACY": "개인 정보 정책"
  }
}

我认为这是一个缓存问题,因为我在资源文件夹中提供服务,浏览器使用旧版本的文件,但清除历史记录不会做任何事情。

此外,由于某些原因,只有韩语版本的语言加载在页脚上!

由于

1 个答案:

答案 0 :(得分:0)

这取决于您使用翻译的方式。

例如,如果您在带有翻译管道的模板文件中使用它们,那么这应该是自动的。

但是,如果要在typescript文件(组件)中获得翻译,那么您将需要通过提供TranslateService来侦听onLangChange EventEmitter。在这里,您必须重新编写逻辑来调用翻译。

此信息可在此处的API部分中找到:https://github.com/ngx-translate/core

如果你正在做所有这些事情,那么它可能与你正在做的事情有关。在这种情况下,我们将根据要求提供更多信息:)