tabs init

src/app/app-routing.module.ts

@@ -3,6 +3,10 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
+  { path: 'home', loadChildren: './tabs/home/home.module#HomePageModule' },
+  { path: 'discover', loadChildren: './tabs/discover/discover.module#DiscoverPageModule' },
+  { path: 'serve', loadChildren: './tabs/serve/serve.module#ServePageModule' },
+  { path: 'mine', loadChildren: './tabs/mine/mine.module#MinePageModule' },
 ];
 @NgModule({
   imports: [

src/app/app.component.ts

 import { Component } from '@angular/core';
-
+// import {App} from "@ionic/pro";
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
@@ -16,7 +16,7 @@ export class AppComponent {
     private statusBar: StatusBar
   ) {
     this.initializeApp();
-    alert(environment.domain)
+    // console.log(App)
   }
 
   initializeApp() {

src/app/tabs/tab1/tab1.module.ts

-import { IonicModule } from '@ionic/angular';
-import { RouterModule } from '@angular/router';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab1Page } from './tab1.page';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    RouterModule.forChild([{ path: '', component: Tab1Page }])
-  ],
-  declarations: [Tab1Page]
-})
-export class Tab1PageModule {}

src/app/tabs/tab1/tab1.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Tab One
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-    <ion-card class="welcome-card">
-      <ion-img src="/assets/shapes.svg"></ion-img>
-      <ion-card-header>
-        <ion-card-subtitle>Get Started</ion-card-subtitle>
-        <ion-card-title>Welcome to Ionic</ion-card-title>
-      </ion-card-header>
-      <ion-card-content>
-        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
-      </ion-card-content>
-    </ion-card>
-    <ion-list lines="none">
-      <ion-list-header>
-        <ion-label>Resources</ion-label>
-      </ion-list-header>
-      <ion-item href="https://ionicframework.com/docs/">
-        <ion-icon slot="start" color="medium" name="book"></ion-icon>
-        <ion-label>Ionic Documentation</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
-        <ion-icon slot="start" color="medium" name="build"></ion-icon>
-        <ion-label>Scaffold Out Your App</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/layout/structure">
-        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
-        <ion-label>Change Your App Layout</ion-label>
-      </ion-item>
-      <ion-item href="https://ionicframework.com/docs/theming/basics">
-        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
-        <ion-label>Theme Your App</ion-label>
-      </ion-item>
-    </ion-list>
-</ion-content>

src/app/tabs/tab1/tab1.page.scss

-.welcome-card ion-img {
-  max-height: 35vh;
-  overflow: hidden;
-}

src/app/tabs/tab1/tab1.page.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
-})
-export class Tab1Page {}

src/app/tabs/tab2/tab2.module.ts

-import { IonicModule } from '@ionic/angular';
-import { RouterModule } from '@angular/router';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab2Page } from './tab2.page';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    RouterModule.forChild([{ path: '', component: Tab2Page }])
-  ],
-  declarations: [Tab2Page]
-})
-export class Tab2PageModule {}

src/app/tabs/tab2/tab2.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Tab Two
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content></ion-content>

src/app/tabs/tab2/tab2.page.scss

-

src/app/tabs/tab2/tab2.page.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
-})
-export class Tab2Page {}

src/app/tabs/tab3/tab3.module.ts

-import { IonicModule } from '@ionic/angular';
-import { RouterModule } from '@angular/router';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Tab3Page } from './tab3.page';
-
-@NgModule({
-  imports: [
-    IonicModule,
-    CommonModule,
-    FormsModule,
-    RouterModule.forChild([{ path: '', component: Tab3Page }])
-  ],
-  declarations: [Tab3Page]
-})
-export class Tab3PageModule {}

src/app/tabs/tab3/tab3.page.html

-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Tab Three
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content></ion-content>

src/app/tabs/tab3/tab3.page.scss

-

src/app/tabs/tab3/tab3.page.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
-})
-export class Tab3Page {}

src/app/tabs/tabs.page.html

 <ion-tabs>
 
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1">
+    <ion-tab-button tab="home">
       <ion-icon name="flash"></ion-icon>
-      <ion-label>Tab One</ion-label>
+      <ion-label>首页</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2">
+    <ion-tab-button tab="discover">
       <ion-icon name="apps"></ion-icon>
-      <ion-label>Tab Two</ion-label>
+      <ion-label>发现</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3">
+    <ion-tab-button tab="serve">
       <ion-icon name="send"></ion-icon>
-      <ion-label>Tab Three</ion-label>
+      <ion-label>服务</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="mine">
+      <ion-icon name="send"></ion-icon>
+      <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
 

src/app/tabs/tabs.router.module.ts

@@ -7,43 +7,16 @@ const routes: Routes = [
     path: 'tabs',
     component: TabsPage,
     children: [
-      {
-        path: 'tab1',
-        children: [
-          {
-            path: '',
-            loadChildren: '../tab1/tab1.module#Tab1PageModule'
-          }
-        ]
-      },
-      {
-        path: 'tab2',
-        children: [
-          {
-            path: '',
-            loadChildren: '../tab2/tab2.module#Tab2PageModule'
-          }
-        ]
-      },
-      {
-        path: 'tab3',
-        children: [
-          {
-            path: '',
-            loadChildren: '../tab3/tab3.module#Tab3PageModule'
-          }
-        ]
-      },
-      {
-        path: '',
-        redirectTo: '/tabs/tab1',
-        pathMatch: 'full'
-      }
+      {path: 'home', children: [{path: '', loadChildren: './home/home.module#HomePageModule'}]},
+      {path: 'discover', children: [{path: '', loadChildren: './discover/discover.module#DiscoverPageModule'}]},
+      {path: 'serve', children: [{path: '', loadChildren: './serve/serve.module#ServePageModule'}]},
+      {path: 'mine', children: [{path: '', loadChildren: './mine/mine.module#MinePageModule'}]},
+      {path: '', redirectTo: '/tabs/home', pathMatch: 'full'}
     ]
   },
   {
     path: '',
-    redirectTo: '/tabs/tab1',
+    redirectTo: '/tabs/home',
     pathMatch: 'full'
   }
 ];

src/provide/backButton.service.ts

 import {EventEmitter, Injectable} from '@angular/core';
 import {Platform, ToastController,  NavController,} from "@ionic/angular";
-import {App} from "@ionic/pro";
+// import {App} from "@ionic/pro";
 import {IonTabs} from "@ionic/angular";
 import {EmitService} from "./emit.service";
 
@@ -15,9 +15,10 @@ export class BackButtonService {
 
     //构造函数 依赖注入
     constructor(public platform: Platform,
-                public appCtrl: App, public eventEmitSer: EmitService,
+                // public appCtrl: App,
+                public eventEmitSer: EmitService,
                 public toastCtrl: ToastController) {
-        console.log(this.appCtrl)
+        // console.log(this.appCtrl)
         // 接收发射过来的数据
         this.eventEmitSer.eventEmit.subscribe((value: any) => {
             this.isDo = value;

src/provide/common.service.ts

@@ -2,7 +2,7 @@ import {Injectable} from "@angular/core";
 import {AlertController, ToastController} from "@ionic/angular";
 import {File} from "@ionic-native/file/ngx";
 import {FileOpener} from "@ionic-native/file-opener/ngx";
-import {environment, environment} from "../environments/environment";
+import {environment} from "../environments/environment";
 
 @Injectable()