feat: add a dialog when change language

src/app/app.module.ts

@@ -24,7 +24,7 @@ import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dial
 import {ElementFooterComponent} from './elements/footer/footer.component';
 import {ElementTermComponent} from './elements/term/term.component';
 import {ElementInteractiveComponent} from './elements/interactive/interactive.component';
-import {ElementNavComponent} from './elements/nav/nav.component';
+import {ChangLanWarningDialogComponent, ElementNavComponent} from './elements/nav/nav.component';
 import {ElementPopupComponent} from './elements/popup/popup.component';
 import {ElementRdpComponent} from './elements/rdp/rdp.component';
 import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
@@ -83,7 +83,7 @@ import {ConnectPageComponent} from './connect-page/connect-page.component';
   ],
   declarations: [
     AppComponent,
-    ElementNavComponent,
+    ElementNavComponent, ChangLanWarningDialogComponent,
     ElementFooterComponent,
     ElementPopupComponent,
     ElementTermComponent,
@@ -128,6 +128,7 @@ import {ConnectPageComponent} from './connect-page/connect-page.component';
   entryComponents: [
     CleftbarDialogComponent,
     ElementDialogAlertComponent,
+    ChangLanWarningDialogComponent,
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/elements/nav/changeLanWarning.html

+<h1 mat-dialog-title>{{"Warning"|trans}}</h1>
+
+<h2>
+  {{"The page will be reload, can you acceptable?"|trans}}
+</h2>
+<div style="float: right">
+  <button mat-raised-button (click)="onNoClick()">{{"Cancel"|trans}}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="selected" cdkFocusInitial>{{"Confirm"|trans}}</button>
+</div>

src/app/elements/nav/nav.component.ts

@@ -5,12 +5,14 @@
  * @date     2017-11-07
  * @author   liuzheng <liuzheng712@gmail.com>
  */
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {AppService, HttpService, LocalStorageService, LogService} from '../../app.service';
 import {CleftbarComponent} from '../../ControlPage/cleftbar/cleftbar.component';
 import {ControlComponent, NavList} from '../../ControlPage/control/control.component';
 import {DataStore, i18n} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {FormControl, Validators} from '@angular/forms';
 // import * as layer from 'layui-layer/src/layer.js';
 declare let layer: any;
 
@@ -21,6 +23,7 @@ declare let layer: any;
 })
 export class ElementNavComponent implements OnInit {
   DataStore = DataStore;
+  ChangeLanWarningDialog: any;
 
   static Hide() {
     jQuery('app-element-nav').hide();
@@ -29,12 +32,19 @@ export class ElementNavComponent implements OnInit {
   constructor(private _appService: AppService,
               private _http: HttpService,
               private _logger: LogService,
+              public _dialog: MatDialog,
               private _localStorage: LocalStorageService) {
     this._logger.log('nav.ts:NavComponent');
     this.getnav();
   }
 
   ngOnInit() {
+    this.ChangeLanWarningDialog = this._dialog.open(
+      ChangLanWarningDialogComponent,
+      {
+        height: '200px',
+        width: '300px',
+      });
   }
 
   click(event) {
@@ -95,11 +105,21 @@ export class ElementNavComponent implements OnInit {
         break;
       }
       case 'English': {
-        this.English();
+        this.ChangeLanWarningDialog.afterClosed().subscribe(
+          result => {
+            if (result) {
+              this.English();
+            }
+          });
         break;
       }
       case 'Chinese': {
-        this.Language('cn');
+        this.ChangeLanWarningDialog.afterClosed().subscribe(
+          result => {
+            if (result) {
+              this.Language('cn');
+            }
+          });
         break;
       }
       default: {
@@ -304,3 +324,21 @@ export class ElementNavComponent implements OnInit {
     location.reload();
   }
 }
+
+
+@Component({
+  selector: 'app-element-nav-dialog',
+  templateUrl: 'changeLanWarning.html',
+})
+export class ChangLanWarningDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<ChangLanWarningDialogComponent>) {
+  }
+
+  ngOnInit() {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}