背景 : 復宏漢霖項目的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實踐(三)
