ionic3 添加多个自定义组件

Posted 2020-11-07 ruo222

往往我们创建自定义组件一般都不止只会创建一个自定义组件，创建多个方式如下。

1.创建自定义组件

ionic g component select-car-no

ionic g component aera-picker

 

2.全局导入到app.module.ts文件并添加到imports配置中声明里面

app.module.ts

//导入自定义组件

import { ComponentsModule } from \'../components/components.module\';

@NgModule({

Declarations:[xxx],

imports: [ /*依赖的模块*/

...

ComponentsModule  //导入自定义组件依赖  注意是这里导入

...

 

3. 修改components.module.ts文件

命令行直接生产后的components.module.ts文件里面可能没有帮我们在imports数组里面自动添加配置，需要我们手动引入模块并配置

添加BrowserModule 、IonicModule模块

import { BrowserModule } from \'@angular/platform-browser\';

import { IonicModule} from \'ionic-angular\';

//配置imports项

imports: [

BrowserModule,

IonicModule.forRoot(ComponentsModule) /*注入IonicModule 注意写法ComponentsModule为你当前的模块名称*/

    ]

其中注意IonicModule.forRoot(ComponentsModule)中的ComponentsModule为该文件全局导出的名称

export class ComponentsModule {}

 

4.在需要使用自定义组件的pages下的xx.module.ts文件里面导入

import {ComponentsModule} from "../../components/components.module";

imports: [

ComponentsModule, //添加

IonicPageModule.forChild(UserCarinfoPage)

],

 

5.页面上使用

<select-car-no #selectCarNo class="car-select-no-box" (childOuterSelectedValue)="selectedCarValueFromChild($event)" [carNoValFromParent]="carNum"></select-car-no>

　　

这里为什么使用中划线的标签的形式而不是驼峰形式？

去组件ts文件里面会发现

因此我们在页面上用中划线的形式。

完整插件代码看这里