新增点东西

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
 import { AuthService } from './service/auth.service';
 
 const routes: Routes = [
@@ -9,7 +9,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

-<div class="mainLoading" *ngIf="loading"></div>
 <ion-app>
   <ion-router-outlet></ion-router-outlet>
 </ion-app>

src/app/app.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router, NavigationEnd, NavigationStart } from '@angular/router';
+import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
@@ -7,25 +6,16 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styles: [`
-    .mainLoading{
-      width: 100%;
-      height: 100%;
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-  `]
+  styles: []
 })
-export class AppComponent implements OnInit {
-  loading = false;
+export class AppComponent {
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
-    private statusBar: StatusBar,
-    private router: Router
+    private statusBar: StatusBar
   ) {
     this.initializeApp();
+    this.initEvent();
   }
 
   initializeApp() {
@@ -35,13 +25,15 @@ export class AppComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-    this.router.events.subscribe((event) => {
-      if (event instanceof NavigationStart) {
-        this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-        });
+  initEvent() {
+    window.addEventListener('orientationchange', function (e) {
+      console.log(e);
+      if (window.orientation === 180 || window.orientation === 0) {
+        console.log('竖屏');
+        window.location.reload();
+      } else if (window.orientation === 90 || window.orientation === -90) {
+        console.log('横屏');
+        window.location.reload();
       }
     });
   }

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
@@ -12,18 +13,20 @@ import { AppRoutingModule } from './app-routing.module';
 import { ApiService } from './service/api.service';
 import { AuthService } from './service/auth.service';
 import { HttpService } from './service/http.service';
+import { TransferService } from './service/transfer.service';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
-  imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
   providers: [
     StatusBar,
     SplashScreen,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     ApiService,
     HttpService,
-    AuthService
+    AuthService,
+    TransferService
   ],
   bootstrap: [AppComponent]
 })

src/app/extra/login/login.component.html

 <div class="loginPage" @fade>
     <div class="topBar">
-        <div class="imgPart">Logo</div>
+        <img class="imgPart" src="../../../assets/icon/favicon.png">
         <div class="title">上海辉度智能科技有限公司</div>
     </div>
     <div class="mainBar">
         <div class="inputLine">
             <div class="labelForInput">用户名</div>
-            <ion-input type="text" value="cy" mode="ios" class="input"></ion-input>
+            <ion-input type="text" [(ngModel)]="req.name" mode="ios" class="input"></ion-input>
         </div>
         <div class="inputLine">
             <div class="labelForInput">密码</div>
-            <ion-input type="password" value="123" mode="ios" class="input"></ion-input>
+            <ion-input type="password" [(ngModel)]="req.ps" mode="ios" class="input"></ion-input>
         </div>
         <ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="login()">Login</ion-button>
     </div>

src/app/extra/login/login.component.scss

@@ -14,11 +14,10 @@
 
 .imgPart{
   height: 70%;
-  width: calc(100% - 180px);
+  //width: calc(100% - 180px);
   margin: 0 auto;
   font-size: 50px;
   line-height: 2;
-  border: 1px solid #ccc;
 }
 
 .title{

src/app/extra/login/login.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { fadeIn } from '../../animations/fade-in';
+import {Component, OnInit} from '@angular/core';
+import {fadeIn} from '../../animations/fade-in';
+import {TransferService} from '../../service/transfer.service';
+import {ApiService} from '../../service/api.service';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss'],
-  animations: [fadeIn]
+    selector: 'app-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+    animations: [fadeIn]
 })
 export class LoginComponent implements OnInit {
 
-  constructor(private router: Router) {}
+    req = {name: '', ps: ''};
+    constructor(private tf: TransferService, private api: ApiService) {
+    }
 
-  ngOnInit() {}
+    ngOnInit() {
+    }
 
-  login() {
-    this.router.navigate(['/main']);
-  }
+    login() {
+        const req = {
+            userName: this.req.name,
+            password: this.req.ps
+        };
+        this.api.login.dologin([req, (data) => {
+            if (data.code === 1) {
+                window.localStorage.setItem('token', data.message);
+                this.tf.transfer({
+                    from: 'app-extra',
+                    to: 'app-home',
+                    url: '/main/index',
+                    query: '',
+                    hash: ''
+                });
+            } else {
+                // message
+            }
+        }]);
+    }
 }

src/app/home/home.module.ts

@@ -17,7 +17,7 @@ import {PageDetailComponent} from '../main/page-detail/page-detail.component';
         IonicModule,
         RouterModule.forChild([
             {
-                path: '',
+                path: 'index',
                 component: HomePage
             },
             {

src/app/home/home.page.html

@@ -4,7 +4,7 @@
     <div class="box" style="color: #ffd31a"><app-page-one></app-page-one></div>
   </ion-slide>
   <ion-slide>
-    <div class="box" style="color: #f04141"><app-page-two></app-page-two></div>
+    <div class="box" id="page_two" style="color: #f04141"><app-page-two></app-page-two></div>
   </ion-slide>
   <ion-slide>
     <div class="box" style="color: #7e57ff"><app-page-three></app-page-three></div>

src/app/main/page-detail/page-detail.component.html

-<ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toList()">List</ion-button>
+<div @fade>
+    <ion-button mode="ios" color="primary" expand="full" class="loginBtn" (click)="toList()">List</ion-button>
+</div>

src/app/main/page-detail/page-detail.component.ts

-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import {Component, OnInit} from '@angular/core';
+import {fadeIn} from '../../animations/fade-in';
+import {TransferService} from '../../service/transfer.service';
 
 @Component({
-  selector: 'app-page-detail',
-  templateUrl: './page-detail.component.html',
-  styleUrls: ['./page-detail.component.scss'],
+    selector: 'app-page-detail',
+    templateUrl: './page-detail.component.html',
+    styleUrls: ['./page-detail.component.scss'],
+    animations: [fadeIn]
 })
 export class PageDetailComponent implements OnInit {
 
-  constructor(private router: Router) { }
+    constructor(private tf: TransferService) {
+    }
 
-  ngOnInit() {}
+    ngOnInit() {
+    }
 
-  toList() {
-    this.router.navigate(['/main']);
-  }
+    toList() {
+        this.tf.transfer({
+            from: 'app-page-detail',
+            to: 'app-home',
+            url: '/main/index',
+            query: '',
+            hash: 'page_two'
+        });
+    }
 
 }

src/app/main/page-four/page-four.component.html

-<p>
-  page-four works!
-</p>
+<div class="personSet">
+  <div class="topBar">
+    <img class="imgPart" src="../../../assets/icon/favicon.png">
+    <div class="topRight">1111111</div>
+  </div>
+</div>

src/app/main/page-four/page-four.component.scss

+.personSet {
+  width: 100%;
+  height: 100%;
+}
+
+.topBar {
+  height: 30%;
+  padding: 10% 0;
+  background-color: lavender;
+}
+
+.imgPart {
+  width: 35%;
+  display: inline-block;
+}
+
+

src/app/main/page-two/page-two.component.ts

-import { Component, OnInit } from '@angular/core';
-import { NavController } from '@ionic/angular';
+import {Component, OnInit} from '@angular/core';
+import {TransferService} from '../../service/transfer.service';
 
 @Component({
-  selector: 'app-page-two',
-  templateUrl: './page-two.component.html',
-  styleUrls: ['./page-two.component.scss'],
+    selector: 'app-page-two',
+    templateUrl: './page-two.component.html',
+    styleUrls: ['./page-two.component.scss'],
 })
 export class PageTwoComponent implements OnInit {
 
-  constructor(private nav: NavController) { }
+    constructor(private tf: TransferService) {
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
-  toDetail() {
-    this.nav.navigateForward('/main/detail');
-  }
+    toDetail() {
+        this.tf.transfer({
+            from: 'app-home',
+            to: 'app-page-detail',
+            url: '/main/detail',
+            query: '',
+            hash: ''
+        });
+    }
 }

src/app/service/api.service.ts

@@ -48,7 +48,7 @@ export class ApiService {
                 if (err && err.error && err.error.status) {
                     if (err.error.status === 401) {
                         // data = {code: 0, message: this.translate.instant('noLoginTips')};
-                        this.router.navigate(['/extra/login']);
+                        this.router.navigate(['/extra']);
                     } else {
                         // data = {code: 0, message: this.translate.instant('wrongServerWithCode') + err.error.status};
                     }

src/app/service/transfer.service.ts

+import { Router } from '@angular/router';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class TransferService {
+    constructor(private router: Router) {}
+
+    transfer(req) {
+        // 此处为ionic4路由跳转的时候不清空之前的页面组件造成的页面短暂交叠
+        // ionic4在发生路由跳转的时候是先进行新组件的加载再进行旧组件的隐藏
+        // 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉
+        if (document.getElementsByTagName(req.to).length > 0) {
+            const y = <HTMLBodyElement>document.getElementsByTagName(req.to)[0];
+            y.style.opacity = '1';
+        }
+        this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
+        if (document.getElementsByTagName(req.from).length > 0) {
+            const x = <HTMLBodyElement>document.getElementsByTagName(req.from)[0];
+            x.style.opacity = '0';
+        }
+    }
+}

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  url: ''
+  url: 'http://172.16.1.23:8092'
 };
 
 /*