ionic教程（5）--自定义组件

目录

 

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>