目录
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>