Background: The CR of Fuhong Hanlin project has been completed. It took five days. Ten days longer than expected. I’ve been working overtime every day for the past five days. Everything comes to him who waits. I can now start developing the Angluar+ Ionic project on my own. Before, we used React+AntDesign. Now it is an extension of the new framework. The harvest is full. This is the last record. Problems encountered in the development process these two days. The knowledge learned.

What you learned: Definitely encounter the model shell layer
  • For example, the need to select a position at the time of entering the projectmyThe page must have the pop-up box that switches post again. And then there are two points. One is theThe model layer.there is another one isSmoke components.

  • So let’s start withSmoke components
  • Just as the name suggests, it is the same piece of stuff that has multiple uses to split into common components. This can be shared on any page. This is a necessary skill for the project.
  • Typically, the extracted components are placed inside SRC /components.
  • Let’s take a look at the public component of my model shell layer:
  1. Directory structure:

  1. Code content:
Opt-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 {}
Import {Component, Input} from '@angular/core'; 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; // Post list checkd = {TerritoryId :''} // Select posts // Initiate constructor(public navParams: navParams, public viewCtrl: TerritoryId :'') ViewController,) { this.jobList = this.navParams.get('jobList'); this.checkd.TerritoryID = this.navParams.get('territoryID') || ''; } // Click to confirm determine =()=>{this.viewCtrl. Dismissing ({selectedItem: = 0) {this.viewCtrl. this.checkd, action: 'save'}); }}
Choose - job. HTML content: <ion-header class="modal-header"> <ion-navbar color="sky" padding-left padding-right> <ion-title </ion-navbar> </ion-navbar> </ion-header> <ion-content style="height: 300px;" style=" text-align: center;" > <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 ? "Substitute post" : </span> </ion-row> </ion-label> <ion-radio (click)=" radiosected (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 class="save" (click)="determine()" </button> </ion-content> "/> </ion-item-group> <button class=" determine()
Opt-job. SCSS content: 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. Content analysis:
  • This public component requires only two parameters. ajobListThere is also aterritoryID. (Just into the page when there is no default value, in my inside switch post, is the need to default for their own landing post)
  • Points to pay attention to:

(1): To call a component, you need to define @ionicPage () above the component page’s class. (2): Components without @ionicPage () are used as tags. You don’t need to choose job.module.ts. Export it to the public components.module.ts of components.

  • Now the components are drawn. So how do we call that.
  • Look atmyThe code for the page invocation
'My' HTML content: <button ion-item (click)="chooseJob()"> <ion-icon item-start> <img src="assets/icon/tr.png" width="30"> </ion-icon> </ span > <span class="color "style="font-size: 15px; font-family: Arial, sans-serif; margin-left: 5px;" >{{territoryName || ''}}</span> </ion-row> </button>
` I ` ts content: / / switch jobs chooseJob = () = > {/ / it is only a position does not trigger layer if (this. TerritoryList. Length < = 1) {return; } // Get post ID let TerritoryId = localstorage. getItem(" TerritoryId "); // Get the model shell layer // 'ChooseJobPage' is the name I export from 'choose-job.module.ts'. // Joblist and TerritoryId are the parameters I pass to the component // Let modal = this.modalCtrl.create("ChooseJobPage", let modal = this. { jobList:this.territoryList ,territoryID},{ cssClass: 'inset-modal' }); Modal.ondiddismiss (data => {if (data. Action == 'save') {// Assign the newly switched post to localStorage (used to set the page to display the current post). this.territoryName = this.territoryList.filter(item => item.TerritoryID === data.selectedItem.TerritoryID)[0].TerritoryName } }); modal.present(); }
Import {ngModule} from '@angular/core'; 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"; // import module@NgModule ({declarations: [], imports: IonicPageModule. ForChild (setUppage), ShareDModule, ChooseJobPageModule, // This is the TS page to get the component page 'ChooseJobPage'. }) export class SetupPageModule {}

The above is the model shell layer of the extraction component and call, the code of the parameter. Those who have ideas can discuss with each other.

Common life cycle
Constructor (){// IonViewWillEnter (){// IonViewWillEnter (); // IonViewWillEnter ()
Need to pay attention to the problems encountered

(1): * ngIf and * ngFor cannot be used on the same tag. You can wrap it in a div. Unshift ({key: “”,value:” “}) (3): The date you want to process is the date you want

  • The first kind: utilizemomentMoment (date).format(‘YYYYMM’) If it’s the current year, it’s going to be202009. Add if necessary-Is the moment (date). The format (‘ YYYY – MM). Get isThe 2020-09Moment is used in many other ways. If you are interested, you can go to the official website. Or directlyCtrlClick in to see the source code. The fastest and most convenient.
  • The second type: projects are old projects. No introductionmomentDo not want to install. Then use the string to deal with. So let me just refer to the way I wrote it
GetMonth = ()=>{// This. Date for the date you need to process. Let getDate = new Date(this.date) // get year let year = String(getDate.getFullYear()); Let month = String(getDate.getMonth()+1).toString().length > 1? String(getDate.getMonth()+1) : '0'+String(getDate.getMonth()+1); this.date = year + month; // This. Date is the date you have processed. For example, the current year is 202009}
Conclusion:

From being unable to understand the Angluar+ Ionic project to writing a complete CR of the Hanlin project. I have learned the basic use of Angluar+ Ionic. Common lifecycle. Echarts handles reports. Problems encountered and so on. Gave me a quick introduction to the door framework. Believe in the near future. The more you write about the Angluar+ Ionic project, the better it will be. The more problems you encounter, the more progress you make. Come on.

  • The CR of this project wrote a total of five articles. Attached are the links to the four replicas written before

Angular5+ Ionic3 + TS Angular5+ Ionic3 Practice (1) Angular5+ Ionic3 Practice (2) Echarts Treatment Report — Angular5+ Ionic3 Practice (3)