ionic和cordova安装

一、安装ionic和cordaova

npm install -g ionic cordova

ionic start my-app

ionic serve

插件安装

 

内置浏览器

https://zhuanlan.zhihu.com/p/55491444

 

创建组件

ionic g page button

 

公共模块

多个模块无法共用同一个组件，要将组件封装成模块，让其他组件可以自由共享

ionic g module module/slide

ionic g component module/slide

将组件导入到模块中

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


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

在其他地方引用模块，而不是组件

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';
import { SlideModule } from './../../module/slide/slide.module';


@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    SlideModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }])
  ],
  declarations: [Tab2Page]
})
export class Tab2PageModule {}

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

<ion-content>

  <ion-button color="primary" [routerLink]="['/button']">
    跳转到按钮组件页面
  </ion-button>

  <app-slide></app-slide>

</ion-content>

 

自定义模块

导入 IonicModule 才可以

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


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