共计 4902 个字符，预计需要花费 13 分钟才能阅读完成。
背景 : 复宏汉霖我的项目的 CR 做完了. 用时五天. 超出预计工夫十天. 这五天每天都在加班. 终于功夫不负有心人. 我当初能够开始单独开发 Angluar+ionic 我的项目了. 之前都是用的 React+AntDesign. 当初算是扩大了新框架. 播种满满. 这里最初记录下. 这两天开发过程中遇到的问题. 学到的常识.
学到的常识: 肯定会遇到的 model 弹层
- 比方这样的需要: 进我的项目的时候抉择岗位, 在
我的页面又要有切换岗位的弹框. 这时候就会遇到两个点. 一个是model 弹层. 还有一个就是抽组件.
- 首先来看下
抽组件 - 顾名思义就是把多个用途的同一块货色抽成公共组件. 这样在任何页面就能够专用. 这也是我的项目必备技能.
- 个别都把抽出来的组件放到 src/components 外面.
- 来看下我的这个 model 弹层的公共组件怎么写的:
- 目录构造:
- 代码内容:
choose-job.module.ts 内容:
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {ChooseJobPage} from './choose-job';
@NgModule({declarations: [ChooseJobPage],
imports: [IonicPageModule.forChild(ChooseJobPage),
],
})
export class ChooseJobPageModule {}
choose-job.ts 内容:
import {Component, Input} from '@angular/core';
import {NavParams,IonicPage, ViewController} from "ionic-angular";
@IonicPage()
@Component({
selector: 'choose-job',
templateUrl: 'choose-job.html',
})
export class ChooseJobPage {@Input() jobList: any; // 岗位列表
checkd = {TerritoryID:''} // 选中的岗位
// 初始化
constructor(
public navParams: NavParams,
public viewCtrl: ViewController,) {this.jobList = this.navParams.get('jobList');
this.checkd.TerritoryID = this.navParams.get('territoryID') || '';
}
// 选中的值
radioSelected =(v)=>{this.checkd = v}
// 点击确认
determine = ()=>{this.viewCtrl.dismiss({selectedItem: this.checkd, action: 'save'});
}
}choose-job.html 内容:
<ion-header class="modal-header">
<ion-navbar color="sky" padding-left padding-right>
<ion-title text-center=""> 抉择岗位 </ion-title>
</ion-navbar>
</ion-header>
<ion-content style="height: 300px;">
<ion-item-group class="list">
<ion-item *ngFor="let item of jobList;let i = index" >
<ion-label>
<ion-row>
<h3>{{item.TerritoryName}}</h3>
<span class="tr">({{item.isPartTime ? "代岗" : "主岗"}})</span>
</ion-row>
</ion-label>
<ion-radio (click)="radioSelected(item)" [checked]="checkd.TerritoryID === item.TerritoryID" ></ion-radio>
</ion-item>
<ion-row justify-content-center align-items-center *ngIf="jobList?.length === 0">
<img src="assets/icon/no_data.png" alt=""width="70"style="margin-top: 150px"/>
</ion-row>
</ion-item-group>
<button ion-button class="save" (click)="determine()">
确定
</button>
</ion-content>choose-job.scss 内容:
approve-list {
.list{
max-height: 200px;
overflow-x: hidden;
}
.tr{
color: #32a3e7;
font-size: 12px;
margin-left: 5px;
}
.save{
width: 87%;
background: #32a3e7;
margin: 20px;
position: absolute;
bottom: 0;
}
}- 内容解析:
- 这个公共组件须要的参数只有两个. 一个
jobList还有一个territoryID.(刚进页面的时候是没有默认值的, 在我的外面切换岗位的时候, 是须要默认为本人登陆的岗位) - 须要留神的中央:
(1): 调用组件是须要在组件页的类上方定义 @IonicPage() 的. 不然获取不到的.(2): 不加 @IonicPage() 的组件是被用作标签应用. 不须要 choose-job.module.ts. 在components 的公共 components.module.ts 外面导出就好了.
- 当初组件抽好了. 怎么调用进去呢.
- 来看下
我的页面调用的代码
` 我的 ` html 内容:
<button ion-item (click)="chooseJob()">
<ion-icon item-start>
<img src="assets/icon/tr.png" width="30">
</ion-icon>
<ion-row>
<h3> 岗位切换 </h3>
<span class="color-blue" style="font-size: 15px;margin-left: 5px;">{{territoryName || ''}}</span>
</ion-row>
</button>
` 我的 ` ts 内容:
// 岗位切换
chooseJob = ()=>{
// 判断只有一个岗位不触发弹层
if (this.territoryList.length <= 1) {return;}
// 获取岗位 id
let territoryID = localStorage.getItem("territoryID");
// 获取 model 弹层
// `ChooseJobPage` 就是我从 `choose-job.module.ts` 外面导出的名字.
// jobList 和 territoryID 就是我给组件的传参
// cssClass 是组件位于页面款式的一个公共 css.
let modal = this.modalCtrl.create("ChooseJobPage", { jobList:this.territoryList ,territoryID},{cssClass: 'inset-modal'});
// 点击确定的时候的返回值
modal.onDidDismiss(data => {if (data.action == 'save') {// 把新切换的岗位赋值到 localStorage 外面(用于设置页面展现以后岗位所用)
this.territoryName = this.territoryList.filter(item => item.TerritoryID === data.selectedItem.TerritoryID)[0].TerritoryName
}
});
modal.present();} ` 我的 ` module 内容:
import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {SetupPage} from './setup';
import {SharedModule} from "../../../app/shared.module";
import {ChooseJobPageModule} from "../../../components/choose-job/choose-job.module"; // 引入组件的 module
@NgModule({declarations: [],
imports: [IonicPageModule.forChild(SetupPage),
SharedModule,
ChooseJobPageModule, // 这里写了 ts 页面就能取到组件页 `ChooseJobPage` 了
],
})
export class SetupPageModule {}以上就是 model 弹层的抽组件和调用, 传参的代码了. 有想法的能够相互探讨哈.
罕用的生命周期
constructor(){} // 初始化
ionViewWillEnter(){// 获取页面列表等操作} // 初始化后调用遇到的须要留神的问题
(1): *ngif和 *ngfor 不能够在同一个标签上应用. 能够用 div 包起来. 父上写 if 子上写 for(2): 给数组列表减少一组数据用 array.unshift({key:'',value:''})(3): 解决日期的办法:
比方 date 为你要解决的日期
- 第一种: 利用
moment间接解决 : moment(date).format(‘YYYYMM’). 如果是以后年月的话失去的就是202009. 如果须要加-就是 moment(date).format(‘YYYY-MM’). 失去的是2020-09.moment 的用法还有很多. 感兴趣的能够去官网看看. 或者间接Ctrl点进去看源码. 最快最不便. - 第二种: 我的项目是老我的项目. 没有引入
moment也不想装. 那就用字符串去解决. 参考一下我写的办法
// 解决年月传参
getMonth = ()=>{
// this.date 为你把须要解决的日期. 用 Date 转一下.getDate 接管.
let getDate = new Date(this.date)
// 获取年
let year = String(getDate.getFullYear());
// 解决月份(先转为字符串再判断长度有余两位补 0)
let month = String(getDate.getMonth()+1).toString().length > 1 ? String(getDate.getMonth()+1) : '0'+String(getDate.getMonth()+1);
this.date = year + month;
// 这时候你页面再调用 this.date 就是你解决好的日期了. 例如失去以后年月就是 202009
}总结:
从看不懂 Angluar+ionic 的我的项目到写残缺个复宏汉霖我的项目的 CR. 心里历程是不一样的.
学到了 Angluar+ionic 的根本应用. 罕用的生命周期.echarts 解决报表. 遇到的问题等等.
让我疾速入门了这门框架. 置信在不久的未来.Angluar+ionic的我的项目写的越多就会越棘手. 遇到的问题越多就会提高越快. 加油.
- 这个我的项目的 CR 一共写了五篇文章. 附上之前写的复宏汉霖四篇的链接
复宏汉霖第一篇意识我的项目(Angular5 + Ionic3 + TS)
Angular5+ionic3 实际(一)
Angluar5+ionic3 实际(二)
echarts 解决报表 —Angluar5+ionic3 实际(三)
正文完
