乐趣区

关于angularjs:Angluar5ionic3实践四

jiezi

背景 : 复宏汉霖我的项目的 CR 做完了. 用时五天. 超出预计工夫十天. 这五天每天都在加班. 终于功夫不负有心人. 我当初能够开始单独开发 Angluar+ionic 我的项目了. 之前都是用的 React+AntDesign. 当初算是扩大了新框架. 播种满满. 这里最初记录下. 这两天开发过程中遇到的问题. 学到的常识.

学到的常识: 肯定会遇到的 model 弹层
  • 比方这样的需要: 进我的项目的时候抉择岗位, 在 我的 页面又要有切换岗位的弹框. 这时候就会遇到两个点. 一个是 model 弹层. 还有一个就是 抽组件.

  • 首先来看下 抽组件
  • 顾名思义就是把多个用途的同一块货色抽成公共组件. 这样在任何页面就能够专用. 这也是我的项目必备技能.
  • 个别都把抽出来的组件放到 src/components 外面.
  • 来看下我的这个 model 弹层的公共组件怎么写的:
  1. 目录构造:

  1. 代码内容:
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;
     }
}
  1. 内容解析:
  • 这个公共组件须要的参数只有两个. 一个 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 实际(三)

退出移动版