组件化开发最方便的就是,一个组件可以应用到多个页面上去
那在ionic4中怎么做呢?
1.创建存放公共component的module---public.module.ts
import {IonicModule} from '@ionic/angular';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
declarations: [],
imports: [
CommonModule,
IonicModule,
],
})
export class PublicModule {
}
2.在public.module.ts中引入相关component
import {IonicModule} from '@ionic/angular';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from './header/header.component';
@NgModule({
declarations: [
HeaderComponent
],
imports: [
CommonModule,
IonicModule,
],
})
export class PublicModule {
}
3.暴露相关compon
import {IonicModule} from '@ionic/angular';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HeaderComponent} from './header/header.component';
@NgModule({
declarations: [
HeaderComponent
],
imports: [
CommonModule,
IonicModule,
],
exports: [
HeaderComponent
]
})
export class PublicModule {
}
4.在相应的地方使用
<app-header></app-header>
注意:创建的页面或组件位于单独的模块中。需要将IonicModule导入添加到该模块,并将该模块导入到应用程序模块中,否则html中所有ion相关的节点有错。