fix(abc:page-header): fix must refresh when i18n changed, close #545

ng-alain · Jul 4, 2018 · 115deff · 115deff
1 parent 0aab18e
commit 115deff
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 31 deletions.
diff --git a/packages/abc/page-header/page-header.component.ts b/packages/abc/page-header/page-header.component.ts
@@ -11,6 +11,7 @@ import {
   ElementRef,
   AfterViewInit,
   Renderer2,
+  OnDestroy,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { toBoolean, isEmpty } from '@delon/util';
@@ -24,6 +25,7 @@ import {
 import { ReuseTabService } from '../reuse-tab/reuse-tab.service';
 
 import { AdPageHeaderConfig } from './page-header.config';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'page-header',
@@ -57,8 +59,9 @@ import { AdPageHeaderConfig } from './page-header.config';
   },
   preserveWhitespaces: false,
 })
-export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
+export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   private inited = false;
+  private i18n$: Subscription;
   @ViewChild('conTpl') private conTpl: ElementRef;
   private _menus: Menu[];
 
@@ -149,6 +152,8 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
     private reuseSrv: ReuseTabService,
   ) {
     Object.assign(this, cog);
+    if (this.i18nSrv)
+      this.i18n$ = this.i18nSrv.change.subscribe(() => this.refresh());
   }
 
   refresh() {
@@ -225,4 +230,8 @@ export class PageHeaderComponent implements OnInit, OnChanges, AfterViewInit {
   ngOnChanges(): void {
     if (this.inited) this.refresh();
   }
+
+  ngOnDestroy(): void {
+    if (this.i18n$) this.i18n$.unsubscribe();
+  }
 }
diff --git a/packages/abc/page-header/page-header.spec.ts b/packages/abc/page-header/page-header.spec.ts
@@ -9,7 +9,7 @@ import {
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterModule, Router } from '@angular/router';
-import { APP_BASE_HREF } from '@angular/common';
+import { APP_BASE_HREF, I18nSelectPipe } from '@angular/common';
 import {
   MenuService,
   AlainThemeModule,
@@ -64,6 +64,8 @@ describe('abc: page-header', () => {
     expect(el.textContent.trim()).toBe(value);
   }
 
+  afterEach(() => context.comp.ngOnDestroy());
+
   describe('[property]', () => {
     beforeEach(() => createComp());
 
@@ -156,32 +158,6 @@ describe('abc: page-header', () => {
       expect(dl.queryAll(By.css('nz-breadcrumb-item')).length).toBe(2);
     });
 
-    it('should be i18n', () => {
-      menuSrv.add([
-        {
-          text: 'root',
-          i18n: 'root-i18n',
-          children: [
-            {
-              text: '1-1',
-              link: '/1-1',
-              children: [
-                { text: '1-1-1', link: '/1-1/1-1-1' },
-                { text: '1-1-2', link: '/1-1/1-1-2' },
-              ],
-            },
-          ],
-        },
-      ]);
-      spyOnProperty(route, 'url').and.returnValue('/1-1/1-1-2');
-      spyOn(i18n, 'fanyi');
-      expect(i18n.fanyi).not.toHaveBeenCalled();
-      context.autoBreadcrumb = true;
-      fixture.detectChanges();
-      expect(dl.queryAll(By.css('nz-breadcrumb-item')).length).toBe(3);
-      expect(i18n.fanyi).toHaveBeenCalled();
-    });
-
     describe('#home', () => {
       it('shoule be hide home', () => {
         spyOnProperty(route, 'url').and.returnValue('/1-1/1-1-2');
@@ -201,6 +177,40 @@ describe('abc: page-header', () => {
         expect(i18n.fanyi).toHaveBeenCalled();
       });
     });
+
+    describe('[i18n]', () => {
+      it('should be auto fanyi i18n text', () => {
+        menuSrv.add([
+          {
+            text: 'root',
+            i18n: 'root-i18n',
+            children: [
+              {
+                text: '1-1',
+                link: '/1-1',
+                children: [
+                  { text: '1-1-1', link: '/1-1/1-1-1' },
+                  { text: '1-1-2', link: '/1-1/1-1-2' },
+                ],
+              },
+            ],
+          },
+        ]);
+        spyOnProperty(route, 'url').and.returnValue('/1-1/1-1-2');
+        spyOn(i18n, 'fanyi');
+        expect(i18n.fanyi).not.toHaveBeenCalled();
+        context.autoBreadcrumb = true;
+        fixture.detectChanges();
+        expect(dl.queryAll(By.css('nz-breadcrumb-item')).length).toBe(3);
+        expect(i18n.fanyi).toHaveBeenCalled();
+      });
+      it('should be refresh when i18n changed', () => {
+        spyOn(context.comp, 'refresh');
+        expect(context.comp.refresh).not.toHaveBeenCalled();
+        i18n.use('en');
+        expect(context.comp.refresh).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('[generateion title]', () => {
@@ -237,11 +247,13 @@ describe('abc: page-header', () => {
 
   describe('[auto sync title]', () => {
     class MockTitle {
-      setTitle = jasmine.createSpy()
+      setTitle = jasmine.createSpy();
     }
     class MockReuse {
       set title(val: string) {}
-      get title(): string { return ''; }
+      get title(): string {
+        return '';
+      }
     }
     let titleSrv: TitleService;
     let reuseSrv: ReuseTabService;
@@ -262,7 +274,11 @@ describe('abc: page-header', () => {
     });
 
     it('should be auto sync title of document and result-tab', () => {
-      const spyReuseTitle = spyOnProperty(reuseSrv, 'title', 'set').and.callThrough();
+      const spyReuseTitle = spyOnProperty(
+        reuseSrv,
+        'title',
+        'set',
+      ).and.callThrough();
       context.title = 'test';
       fixture.detectChanges();
       expect(titleSrv.setTitle).toHaveBeenCalled();