ionic4创建公共组件

1、创建公共模块以及组件

ionic g module module/slide// 创建模块
ionic g component module/slide// 创建组件

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

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

@NgModule({
  declarations: [SlideComponent],
  imports: [
    CommonModule,
    IonicModule,// ionic组件使用
    FormsModule// 双向绑定 [(ngModel)]
  ],
  exports:[SlideComponent]// 暴露组件
})
export class SlideModule { }

3、用到的地方引入自定义模块，并依赖注入自定义模块

import { SlideModule } from '../module/slide/slide.module';
@NgModule({ imports: [
CommonModule, FormsModule,
IonicModule,
SlideModule, RouterModule.forChild(routes)
],
declarations: [Tab4Page] })

4、使用自定义模块

<app-slide [msg]="bangding"  #getmsg></app-slide>
//compc组件调用slide
@ViewChild("getmsg", { static: false }) getmsg: SlideComponent;//获取子组件的数据
// slide.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Input() msg:any; //传入的数据

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 { }