fix: fix homepage table i18n issue

phodal · Apr 16, 2020 · 806099e · 806099e
1 parent bfbbe68
commit 806099e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 13 deletions.
diff --git a/src/app/features/periodic-table/atom-category/atom-category.component.ts b/src/app/features/periodic-table/atom-category/atom-category.component.ts
@@ -3,37 +3,47 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   OnInit,
   Output,
+  SimpleChanges,
 } from '@angular/core';
 
 @Component({
   selector: 'app-atom-category',
-  template: `<div
-    (mouseenter)="enter.emit(type)"
-    (mouseleave)="enter.emit('')"
-    [class.selected]="selected"
-  >
-    <div class="{{ type }} item-block"></div>
-    <span class="symbol">{{ symbol }}</span>
-  </div> `,
+  template: `
+    <div
+      (mouseenter)="enter.emit(type)"
+      (mouseleave)="enter.emit('')"
+      [class.selected]="selected"
+    >
+      <div class="{{ type }} item-block"></div>
+      <span class="symbol">{{ name }}</span>
+    </div>
+  `,
   styleUrls: ['./atom-category.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AtomCategoryComponent implements OnInit {
+export class AtomCategoryComponent implements OnInit, OnChanges {
   @Output()
   enter = new EventEmitter<string>();
 
   @Input()
   selected: boolean;
 
   @Input()
-  symbol: string;
+  name: string;
 
   @Input()
   type: string;
 
   constructor() {}
 
   ngOnInit() {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.name) {
+      this.name = changes.name.currentValue;
+    }
+  }
 }
diff --git a/src/app/features/periodic-table/periodic-table/periodic-table.component.html b/src/app/features/periodic-table/periodic-table/periodic-table.component.html
@@ -4,7 +4,7 @@
                        class="category"
                        [type]="category.type"
                        [selected]="selectCategory === category.type"
-                       [symbol]="category.displayName"
+                       [name]="category.displayName"
                        (enter)="enterPhase($event)"></app-atom-category>
   </div>
 

diff --git a/src/app/features/periodic-table/periodic-table/periodic-table.component.ts b/src/app/features/periodic-table/periodic-table/periodic-table.component.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -12,7 +13,8 @@ import {
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { debounceTime, map, startWith, takeUntil, tap } from 'rxjs/operators';
 import { Atom, HighlightState } from '../shared';
-import { TranslateService } from '@ngx-translate/core';
+import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
+import { ChangeDetection } from '@angular/cli/lib/config/schema';
 
 const MAX_ROW_INDEX = 7;
 const MAX_COL_INDEX = 18;
@@ -118,12 +120,25 @@ export class PeriodicTableComponent implements OnInit, OnChanges {
     { type: 'platform', displayName: 'Platform' },
   ];
 
-  constructor(private http: HttpClient, public translate: TranslateService) {
+  constructor(
+    private http: HttpClient,
+    public translate: TranslateService,
+    private cd: ChangeDetectorRef
+  ) {
     this.currentAtom = null;
     this.currentRowHeader = null;
     this.currentColHeader = null;
     this.atoms = null;
     this.selectCategory = '';
+    this.updateCategoriesByLang();
+
+    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.updateCategoriesByLang();
+      this.cd.detectChanges();
+    });
+  }
+
+  private updateCategoriesByLang() {
     if (this.translate.currentLang === 'en') {
       this.categories = this.enCategories;
     } else {