Ionic - 组件化开发之自定义组件

最新推荐文章于 2021-06-24 23:06:00 发布

Lucio_cn

最新推荐文章于 2021-06-24 23:06:00 发布

阅读量7.1k

点赞数

分类专栏： Ionic AngularJs hybird APP Ionic专栏文章标签： Ionic Angular App

本文链接：https://blog.youkuaiyun.com/lizhipeng123321/article/details/86678903

版权

本文介绍了使用Ionic进行组件化开发的方法，通过创建自定义表单组件来提高开发效率。详细步骤包括：1) 使用命令或手动创建组件；2) 编写组件的HTML、SCSS和TS代码；3) 在app.module.ts中导入组件；4) 在父组件中传入数据并接收子组件的数据。这种组件化开发方式有助于优化项目结构，节省时间和精力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

万物皆组件思想,组件化开发,优化项目,省时省力

1,使用命令创建一个表单component

ionic g component select-table
//其他指令
ionic g page YourPageName //创建新页面
ionic g directive YourPageName //创建指令
ionic g component YourComponentName //创建组件
ionic g provider YourProviderName //创建服务
ionic g pipe YourPipeName //创建过滤器

或者手动创建

结果如图

2,编写组件代码

select-table.html

<div>
  <table align="center" border="1">
    <tr>
      //父组件传入表头
      <td 
        *ngFor="let j of thMap">{
  {j}}</td>
    </tr>
      //遍历表单数据
    <tr *ngFor="let x of resMap;let idx=index" 
        (click)="selectTR(idx)" 
        [ngClass]="{'selectCls':selectIdx === i

最低0.47元/天解锁文章