关于angular:复宏汉霖Angular-Ionic-TS

51次阅读

共计 5599 个字符，预计需要花费 14 分钟才能阅读完成。

背景: 新接手复宏汉霖我的项目, 记一下须要后期相熟的货色, 不便前期保护. 首次开始 Angular+ionic 我的项目. 给本人打气! 加油! 文章有点长, 须要急躁看~~

先放张图片, 安抚一下眼睛.

打包地址的地位:

两个都要替换对应的地址再进行打包.ios 打包须要苹果电脑.

先相熟一个简略的集体设置页面:

页面理论图如下:

看一下页面文件夹的目录构造:


setup.html : 页面
setup.scss : css 款式
setup.ts : 解决逻辑
setup.module.ts : model 层
staff.service.ts : services 层

我发现这个我的项目它们是把 service 都放在一起的. 我之前写的其余我的项目是每个文件夹下有本人的 service....

来钻研一下 集体设置 这个页面是怎么画进去的:
先钻研下页面实现 HTML:

来看下人家的代码是怎么写的:

  • 第一局部发现了<ion-header>`<ion-title>` 的标签. 从名字看了解就是写 title 的标签. 果然找到了零碎设置四个字. 就是页面的头部地位.
  • 第二局部, 整体用 <ion-content> 标签包起来, 就是页面的内容
  1. 持续往下看, 发现了 <ion-icon>`<h2> 标签用来展现头像和姓名. 用<div>` 略微调整了下布局.
  2. 持续往下看, 发现了 <ion-list> 标签包裹的内容. 对照页面看. 果然有 批改手势明码 , 对于 , 客服热线 等一个个 item. 这样的 item 用 list 标签是最合适的. 没故障. 外面就是用一个个 div 把头像和文字写到一排. 而后设置了一个点击办法.
  3. 持续往下看, 在 <ion-list> 完结标签前面. 写了一个 div 标签. 用来绘制页面底部的 登记账号 的地位.div 里面包个button, 加个点击事件就好了.
  • 这样一条条理进去整个页面的布局就清晰可见了.
setup.html 内容:

<ion-header>
  <ion-navbar color="sky">
    <ion-title> 零碎设置 </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="gray-bg">
  <div class="setting-top" padding-top>
    <ion-item tappable (tap)="toProfile()">
      <ion-icon item-start>
        <img src="assets/icon/avatar_duel_126.png" width="50">
      </ion-icon>
      <h2>{{currentStaff?.UserName}}</h2>
      <p></p>
    </ion-item>
  </div>
  <ion-list>
    <button ion-item (click)="changeGestureCode()">
      <ion-icon item-start>
        <img src="assets/icon/pattern_yellow_58.png" width="30">
      </ion-icon>
      <h3> 批改手势明码 </h3>
    </button>
    <button ion-item (click)="aboutPage()">
      <ion-icon item-start>
        <img src="assets/icon/info_blue_58.png" width="30">
      </ion-icon>
      <h3> 对于 </h3>
    </button>
    <button ion-item (click)="ToCallNumber()">
      <ion-icon item-start>
        <img src="assets/icon/phone_green_58.png" width="30">
      </ion-icon>
      <h3> 客服热线 <span class="color-blue">400-XXX-0800</span></h3>
    </button>
  </ion-list>

  <div padding>
    <button ion-button block color="danger" (click)="logout()"> 登记账号 </button>
  </div>
</ion-content>
钻研完 HTML 页面后, 下一步就要看, 点击事件的背地做了什么事件.

先来看下逻辑页面的解决:

  • 顶部引入了页面所需的装璜器. 组件.service等内容.
  • @IonicPage()空装璜器
  • @Component({selector: 'page-setup',templateUrl: 'setup.html',}) 公共组件和该组件的 HTML 模板文件.
  1. templateUrl:'setup.html'这个名字很相熟就不多解释了. 就是我刚刚剖析的 HTML 页面的文件名.
  2. selector: 'page-setup'是一个公共组件, 能够共用组件内的款式, 逻辑, 等所有内容.
  • 上面看下 SetupPage 类外面有哪些货色.
  1. 定义页面所需的变量 : currentStaff: any;看名字了解为以后的人员信息, 类型为any
  2. 定义页面所需的变量 : selectedStaff: any;看名字了解为抉择的人员信息, 类型为any
  3. constructor页面初始化的时候注入依赖, 依赖外面有一些上面要用到的办法.
  4. toProfile,changePassword等办法的正文介绍的很分明了. 是用来做什么的. 这里说一下 this.navCtrl.push 的意思是页面跳转. 外面的两个参数: 一是跳转的页面路由二是带过来的参数.this.navCtrl就是刚刚注入的 NavController 依赖,this.navCtrl.push的 .push 就是 NavController 外面的办法.
  5. 批改手势明码 的办法外面用到了一个办法叫做 this.modalCtrl.create 是用来在页面下层浮现一个 model. 传参也是两个参数, 一个页面路由一个传递的参数.
  6. ionViewDidEnter办法是在 constructor 之后执行的. 相当于在页面初始化之后去获取一些人员信息用来展现.
setup.ts 内容:

import {Component} from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams, Platform} from 'ionic-angular';
import {AlertService} from "../../../providers/util/alert.service";
import {StaffService} from "../../../services/staff.service";
import {JPush} from '@jiguang-ionic/jpush';

@IonicPage()
@Component({
  selector: 'page-setup',
  templateUrl: 'setup.html',
})
export class SetupPage {
  currentStaff: any;
  selectedStaff: any;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public staffService: StaffService,
              public jPush: JPush,
              public platform: Platform,
              public alertService: AlertService,
              public modalCtrl: ModalController) { }


  // 查看个人信息
  toProfile() {this.navCtrl.push('StaffProfilePage', {});
  }

  // 批改明码
  changePassword() {this.navCtrl.push('ChangePasswordPage', {});
  }

  // 对于页面
  aboutPage() {this.navCtrl.push('AboutPage', {});
  }
  /***
   * 拨打客服热线
   */
  ToCallNumber = () => {document.location.href = "tel:400-xxx-0800"};

  /**
   * 批改手势明码
   */
  changeGestureCode = () => {let modal = this.modalCtrl.create("GesturePage", {type: "modify", cssClass: 'gesture-modal'});
    modal.present();};
  /**
   * 获取以后用户信息
   */
  getStaffInfo = () => this.staffService.GetStaffInfo().then((info) => {this.currentStaff = info;});


  /**
   * 登记
   */
  logout = () => this.alertService.presentAlertWithCallback("请确认", "是否确认登记").then((status) => {if (status) {this.navCtrl.setRoot("LoginPage").then(() => {
        this.selectedStaff = null;
        localStorage.clear();
        if (this.platform.is('cordova')) {this.jPush.deleteAlias({sequence: 1}); // 登记极光别名
        }
      });
      // 403 后跳到登录
      // this.staffService.GetStaffMobileIndexModel().then(() => this.navCtrl.setRoot("LoginPage"))
    }
  });

  ionViewDidEnter() {this.getStaffInfo()
  }

}

setup.scss 内容:

page-setup {
  .scroll-content {-webkit-overflow-scrolling: auto;}
  .setting-top {background: url("../assets/imgs/settings_bg.png") center no-repeat;
    height: 20vh;
    width: 100%;
    background-size: 100% 100%;
    .item-md, .item-ios {
      background-color: transparent;
      ion-icon[item-start] + .item-inner {margin-left: 12px;}
      &.item-block {
        .item-inner {
          border-bottom: none;
          color: #fff;
          p {color: #fff;}
        }
      }
    }
  }
  .header-ios .toolbar-background-ios {border-color: $color-nav;}
}
当初用的办法介绍完了来介绍一下页面的 model
  • @NgModule 是 Angular 的的根模块, 称为元数据. 这个外面有逻辑页面须要用到的模块, 管道等内容.
  • imports外面的 IonicPageModule.forChild(SetupPage) 就是用来连贯你的逻辑 (SetupPage) 页面. 能够往回看. 你的 setup.ts 的类名就是叫SetupPage.
setup.module.ts 内容:

import {NgModule} from '@angular/core';
import {IonicPageModule} from 'ionic-angular';
import {SetupPage} from './setup';
import {SharedModule} from "../../../app/shared.module";

@NgModule({declarations: [],
  imports: [IonicPageModule.forChild(SetupPage),
    SharedModule
  ],
})
export class SetupPageModule {}
当初看一下最初的 service 层:
  • service层就是用来连贯后端接口的返回值的.
  • 在 setup.ts 逻辑文件的上方能够看到有 import {StaffService} from "../../../services/staff.service"; 的导入. 这样导入后就能够用 this.staffService.GetStaffInfo().then((info) => {...}); 去获取后端返回的以后用户信息.

staff.service.ts 局部办法内容:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from "rxjs";

@Injectable()
export class StaffService {constructor(public http: HttpClient) { }

 /**
   * 获取以后用户的信息
   * @constructor
   */
  GetStaffInfo = () => new Promise((resolve, reject) =>
    this.http.get('api/Staff/GetCurrentStaffInfo')
      .subscribe(res => {resolve(res);
      }, (err) => {//reject(err);
      })
  );
  
  ....
  
}

总结

明天意识了一下复宏汉霖 我的 页面的实现. 从html-scss-model-serivce. 页面到款式到逻辑到接口返回值简略的理解了一下. 大抵晓得了页面是怎么实现的. 前期还须要常常光顾官网粗浅理解:
Angular 官网
Ionic3 官网

正文完
angular
发表至： angular
2020-09-04
 0
关于angular:关于动态表单遇到的一些问题
关于angular:改用户功能为动态
关于angular:Angular前后端分离项目如何企业微信网页认证
关于angular:angular-多选表单数据绑定