load改版

src/app/app.component.html

-<div id="v-loading">
+<div id="v-loading" *ngIf="load.isLoad">
   <div class="loading-inner">
-    <div class="circle_process">
-      <div id="innerNum"></div>
+    <div class="circle_process" *ngIf="load.showNum">
+      <div id="innerNum">{{load.time}}s</div>
       <div class="wrapper right">
         <div class="circle rightcircle"></div>
       </div>
@@ -9,7 +9,7 @@
         <div class="circle leftcircle" id="leftcircle"></div>
       </div>
     </div>
-    <div id="loading-inner"></div>
+    <div id="loading-inner">{{load.msg}}</div>
   </div>
 </div>
 <ion-app>

src/app/app.component.ts

@@ -6,18 +6,19 @@ import {StatusBar} from '@ionic-native/status-bar/ngx';
 import {Router, NavigationEnd} from '@angular/router';
 import {AppMinimize} from '@ionic-native/app-minimize/ngx';
 import {Mqtt} from './service/mqtt';
+import {Load} from './service/load';
 
 declare var screen: any;
 
 @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html',
+    providers: [Load],
     styles: [`
         .circle_process {
             width: 100px;
             height: 100px;
             margin: 0 auto;
-            display: none;
         }
 
         .circle_process .wrapper {
@@ -100,7 +101,8 @@ export class AppComponent implements AfterViewInit, OnDestroy {
         private statusBar: StatusBar,
         private appMinimize: AppMinimize,
         private router: Router,
-        private mqtt: Mqtt
+        private mqtt: Mqtt,
+        public load: Load
     ) {
         this.initializeApp();
     }

src/app/service/load.ts

@@ -5,19 +5,18 @@ export class Load {
     constructor() {
     }
 
-    private isLoad = false;
-    private time = 0;
+    public isLoad = false;
+    public showNum = false;
+    public msg = '';
+    public time = 0;
 
     toLoad(msg, type) {
         if (!this.isLoad) {
             this.isLoad = true;
-            document.getElementById('v-loading').style.display = 'block';
-            document.getElementById('loading-inner').innerText = msg;
+            this.msg = msg;
             if (type) {
+                this.showNum = true;
                 this.time = 0;
-                // @ts-ignore
-                document.getElementsByClassName('circle_process')[0].style.display = 'block';
-                document.getElementById('innerNum').innerText = this.time.toString() + 's';
                 this.addNum();
             }
         }
@@ -26,8 +25,7 @@ export class Load {
     addNum() {
         setTimeout(() => {
             if (this.isLoad) {
-                this.time ++;
-                document.getElementById('innerNum').innerText = this.time.toString() + 's';
+                this.time++;
                 this.addNum();
             }
         }, 1000);
@@ -35,8 +33,8 @@ export class Load {
 
     offLoad() {
         this.isLoad = false;
-        document.getElementById('v-loading').style.display = 'none';
-        document.getElementById('loading-inner').innerText = '';
-        document.getElementById('innerNum').innerText = '0s';
+        this.showNum = false;
+        this.msg = '';
+        this.time = 0;
     }
 }

src/global.scss

@@ -107,7 +107,6 @@ img {
   z-index: 9999999999999;
   position: relative;
   text-align: center;
-  display: none;
   .loading-inner {
     min-height: 30px;
     min-width: 150px;
@@ -122,6 +121,9 @@ img {
     line-height: 30px;
     text-align: center;
   }
+  #loading-inner {
+    font-size: 16px;
+  }
 }
 
 .msgToast {