目录

1、新建组件

2、修改app/app.modules.ts

3、在页面中使用自定义的组件

3.1、修改login.moduls.ts中，引入组件

3.2、在login.html中使用

1、新建组件

ionic g component actionSheet

新建名为actionSheet的组件, 组件在src/components里面

2、修改app/app.modules.ts

//引入components模块import { ComponentsModule } from "../components/components.module";//引入的模块 依赖的模块imports: [BrowserModule,ComponentsModule,IonicModule.forRoot(MyApp)],

引入一次即可，无需多次引入

3、在页面中使用自定义的组件

我想在login.html中使用

3.1、修改login.moduls.ts中，引入组件

import { NgModule } from '@angular/core';import { IonicPageModule } from 'ionic-angular';import { LoginPage } from './login';import { ComponentsModule } from "../../components/components.module";//需引入@NgModule({declarations: [LoginPage,],imports: [IonicPageModule.forChild(LoginPage),ComponentsModule,//需引入],})export class LoginPageModule {}

要注意，文件路径

3.2、在login.html中使用

<!-- 直接使用组件 --><action-sheet></action-sheet>

hello world字样默认左对齐，

简单修改一下action-sheet.html：

<div text-center>{{text}}</div>