ionic创建页面以及页面的跳转、ionic新增tabs页面、ionic自定义模块以及数据渲染等

1、ionic创建页面

ionic中创建页面的方式是与ionic 3.x一样

• 1、cd到项目的目录
• 2、通过ionic g page 你的页面名称

创建一个新的页面.png

2、ionic去实现页面的跳转

如果我们想在tab1里面写一个操作按钮去跳转到button页面，我们可以按照Angular框架的路由跳转去进行操作，在ionic 4.x中路由是完全基于Angular的。

• 首先在app.routing.module.ts中添加路由路径

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'my-page',
    loadChildren: () => import('./my-page/my-page.module').then( m => m.MyPagePageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

• 然后返回到tab1页面中使用进行跳转

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-button color="tertiary" [routerLink]="[ '/my-page']">跳转到my-page页面</ion-button>
  </ion-content>
  
</ion-content>

• 在my-page页面中可以简单的做一些angular的指令操作

<ion-header style="display: flex;">
  <ion-buttons style="border-bottom: 1px solid #ccc">
    <ion-back-button text="返回"></ion-back-button>
  </ion-buttons>
  <ion-toolbar>
    <ion-title>myPage</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of datas;let i = index;">
      <ion-label>
        第{{i+1}}条数据为:{{item}}
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>

image.png

3、ionic4.x 新增底部tabs页面

• 创建tab4模块：

ionic g page tab4

• 修改根目录中的app-routing.modules.ts文件里的路由配置，去掉默认增加的路由：

• tabs.router.module.ts中新增路由：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'tab2',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

• tabs.page.html中新增底部tab切换按钮：

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

image.png

4、ionic4.x中自定义公共模块

• 创建公共模块以及组件：

ionic g module module/slide

ionic g component module/slide

• 公共模块slide.module.ts中暴露对应的组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlideComponent } from './slide.component'


@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule
  ],
  exports:[SlideComponent]
})
export class SlideModule { }

• 在用到的地方引入自定义模块，并依赖注入自定义模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { Tab4PageRoutingModule } from './tab4-routing.module';

import { Tab4Page } from './tab4.page';
import { SlideModule } from '../module/slide/slide.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Tab4PageRoutingModule,
    SlideModule
  ],
  declarations: [Tab4Page]
})
export class Tab4PageModule {}

• 模板中使用：

  <app-slide></app-slide>

5、Ionic4.x 自定义公共模块中使用 ionic 内置组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlideComponent } from './slide.component'
import {IonicModule} from '@ionic/angular'


@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports:[SlideComponent]
})
export class SlideModule { }

image.png