众所周知,前端三大框架当中组件化已经成为一个必不可少的功能,大大简化开发,提高代码复用率,可以由一个超级程序员(架构师)编写大部分核心通用组件来实现前端架构的基础,一般开发人员熟悉组件出入口及特性后可以极大程度提高开发效率,并且组件拥有高可扩展性,可以满足日益增多的前端页面样式功能需求.
这个子组件解决的问题就是完全根据data数据渲染一个列表,以及每个子项都根据data数据进行页面跳转功能,不用再重复编写相似的样式和TS.
子组件html模板,使用ionic框架编写.可以看到它的结构是页面标题+子标题item.title+子内容item.content+子按钮item.apply.使用*ngFor指令遍历this.data(父组件传入)数组渲染列表.其中子按钮还根据data的数据进行页面跳转活动.
<ion-header> <ion-navbar color="primary"> <ion-title>{{this.title}}</ion-title> </ion-navbar> </ion-header> <ion-content style="background-color: #dee3e9"> <ion-row *ngFor="let item of this.data"> <ion-item class="listlanstyle" style="margin-bottom: 2px;padding: 0;width: 100%;"> <p style="font-size:1.8rem;color:black;text-align: center" [innerHtml]=item.title></p> </ion-item> <ion-item class="listlanstyle" style="margin-bottom: 2px;padding: 0;width: 100%;height: auto"> <p style="color:black;text-align: left" [innerHtml]=item.content></p> </ion-item> <ion-item class="listlanstyle" style="margin-bottom: 5px;padding: 0;width: 100%;"> <div ion-button block style="height: 3rem" (click)="navMethod(item)">{{item.apply}}</div> </ion-item> </ion-row> </ion-content>
子组件ts,使用@Input装饰器定义了两个接收输入的属性,title是生成页面的标题,data是生成整个组件html页面的数组,通过父组件传入的[data]属性来渲染整个页面.另外,定义了一个navMethod()方法用来响应点击事件,进行页面跳转.
import { Component,Input} from '@angular/core'; import { IonicPage, NavController, NavParams,ToastController,AlertController, } from 'ionic-angular'; import {Api} from "../../../providers/api/api"; import {UserService} from "../../../providers/ctrlSupport/User.service"; import {Storage} from "@ionic/storage"; import {WalletService} from "../../../providers/pay/Wallet.service"; @IonicPage() @Component({
//声明好的组件识别标记 selector: 'green_pass', templateUrl: 'green_pass.html' }) export class GreenPass { //标题 @Input() title:string //循环采样数据 @Input() data:any constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public storage: Storage, public api:Api, public wallSer : WalletService, public alertCtrl:AlertController, private userServ: UserService) { } //组件支持的跳转 public navMethod(item){ console.log(item.navpage) this.navCtrl.push(item.navpage) } }
注意到selector:'green_pass'是将来使用子组件的标签.完成后,需要一些模块方面的配置才能在父组件使用:
在父组件的module.ts之中引入子组件(TS关于模块知识也是需要注意的点,TS的灵魂),引入之后相当于声明了父组件可以使用子组件:
import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { ProfessionalIntroduction } from './professional_introduction'; //子组件类 import { GreenPass } from '../green_pass/green_pass'; @NgModule({ declarations: [ ProfessionalIntroduction, //子组件类 GreenPass ], imports: [ IonicPageModule.forChild(ProfessionalIntroduction), ], }) export class ProfessionalIntroductionModule {}
接下来我们来到父组件的HTML模板中,前期做了很多铺垫后,实际开发使用子组件非常简单:
<green_pass #child [title]="'绿色通道'" [data]="this.data"></green_pass>
没错,就是扎么简单.其中[title]传入页面标题,[data]传入渲染页面的全部内容.this.data是父组件唯一需要准备的渲染数据,完全应用后这里数据可以由后台service生成,以完全数据驱动的姿态渲染页面,下面是一个手写的例子:
this.data = [ { 'title':'生源地助学贷款1', 'content':'    国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策', 'apply':'立即申请吗1', 'navpage': 'ProfessionalIntroduction' },{ 'title':'建档立卡户', 'content':'    国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策' + '国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策' + '国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策' + '国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策国家政策', 'apply':'立即申请吗2', 'navpage': 'ProfessionalIntroduction' } ]
可以看到这组数据包含了页面所需的内容,子标题,子内容,子按钮名称,子跳转页面
启动后可以看到最终效果:
点击按钮,即可触发子组件方法,跳转到data中配置好的页面地址(data数组项中的navpage)
组件也有其弊端:
1.门槛.组件的学习\设计\使用都需要额外成本,如果你的团队没有使用组件开发,切换成本是有些高的.特别是当你设计完组件后,UI设计师不理解组件化开发,普通成员不愿意学习组件开发,那么组件库就形同虚设,毫无用武之地;
2.组件库积累.任何一个好用的组件库都需要长期积累,迭代开发,当所有人都经常使用并维护迭代它时,就会像玉石一样越打磨越光亮,反之一个没有数量和质量的组件库,不好用的感觉会很明显,那么开发人员往往会抛弃是用你的组件库,他们认为自己实现的页面会比它好得多,虽然有点麻烦.
3.公司规模和团队技术,以及老板的支持很重要.当决定用你的组件库时,其实你已经成为公司的架构师了.
网络上关于Angular2的组件的使用教程很多要么残缺不全,要么过于简陋影响理解组件的使用,下面我将从头分享自己实现的一个实用组件---一个完全数据驱动的内容信息页的组件,用来解决业务上大量重复出现,导致开发者不断手写新页面问题.学会它可以套用在各个地方,开发属于自己的组件库.
当组件库中组件数量不断提升,分割越来越小,越来越符合项目业务逻辑场景的组件,那么开发就会越来越顺利,越来越快!