Ionic4与Angular开发实战全指南

Question

在Angular 8与Ionic 4集成的项目中，首先确保Node版本不高于14.19.0进行npm install。安装Ionic CLI后，使用ionic g page pages/xxxx生成页面，它会自动更新全局路由；对于子路由，需在对应页面的模块中手动添加。公共组件通过ionic g component component/xxx生成，但需封装为模块（如ComponentsModule）以供其他模块调用，在目标页面的模块中导入后即可使用。

Ionic官网提供了组件文档，命令如ionic g page pages/my-risk-management可快速生成文件结构。以下是一个实际案例的代码示例，展示了HTML与TypeScript的配合使用：


  
    
      
        
          {{ mapGroupName(item.group) }}
        
        {{ item.measures }}

mapGroupName(code) {
  const mapper = {
    notOnWork: '未涉及',
    ctrl: '管控中',
    notCtrl: '未管控',
    ctrlRight: '管控到位',
    notCtrlRight: '待加强',
    overdueCtrl: '管控逾期',
  };
  return mapper[code];
}

getLabelClass(code) {
  const mapper = {
    ctrl: 'heading--blue',
    notCtrlRight: 'heading--yellow',
    ctrlRight: 'heading--green',
    overdueCtrl: 'heading--red',
    notCtrl: 'heading--orange',
    notOnWork: 'heading--gray',
  };
  return mapper[code];
}

queryGroupMeasures() {
  this.service.queryMeasuresByGroup(this.item.riskOrderId).subscribe(({ code, data }) => {
    if (200 === code) {
      this.groupResult = data;
      const { ctrl, notCtrl, ctrlRight, overdueCtrl, notCtrlRight, notOnWork } = data;
      this.controllingCount = ctrl.count;
      this.notControlCount = notCtrl.count;
      this.controlInPlaceCount = ctrlRight.count;
      this.controlOverdueCount = overdueCtrl.count;
      this.toBeStrengthenedCount = notCtrlRight.count;
      this.notInvolvingCount = notOnWork.count;
    }
  });
}

get list() {
  if (!this.groupResult) return [];
  const temp = ['all', 'ctrl', 'notCtrlRight', 'ctrlRight', 'overdueCtrl', 'notCtrl', 'notOnWork'];
  return this.groupResult[temp[this.activeLabel]].measuresList;
}

Ionic4中Popover的用法与常规组件略有不同：首先创建模板，然后在模块中声明，并在使用时通过组件类引用。关键步骤包括在对应页面的模块中导入Popover组件。

Ionic生命周期提供了页面状态管理的钩子：

ionViewDidLoad：页面加载时触发，仅一次。
ionViewWillEnter：将要进入页面时触发。
ionViewDidEnter：进入页面时触发，常用于每次进入刷新数据。
ionViewWillLeave：将要离开页面时触发。
ionViewDidLeave：离开页面时触发。

例如，在需要刷新数据的页面使用ionViewDidEnter，可确保每次进入时执行更新操作。

升级Angular CLI至最新版本可通过以下命令实现：

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

创建Ionic+Angular项目时，先安装Ionic和Cordova：cnpm i ionic cordova。然后使用ionic start angularIonic tabs，选择Angular模板，生成带标签页的项目。启动时若端口占用，可使用ng serve --port=4203指定端口。

生成组件命令为ng g component components/newDemo，它会创建组件文件并自动更新模块。

自定义组件模块需在多个模块中引用时，将组件封装为共享模块（如CommonComponentsModule），在其他模块中导入后即可使用。

打包APK需要安装Android Studio并配置环境变量：

设置ANDROID_HOME为SDK路径（如C:\Users\xxx\AppData\Local\Android\Sdk）。
设置GRADLE_HOME为Gradle路径（如C:\Users\xxx\AppData\Local\Android\gradle-5.4.1）。
在Path中添加%ANDROID_HOME% ools、%ANDROID_HOME%\platform-tools和%GRADLE_HOME%\bin。

配置完成后重启电脑，运行cordova platform add android和cordova build android。连接设备后通过cordova run android运行。若遇网络权限错误，在AndroidManifest.xml中添加。

依赖下载问题可通过阿里云代理解决，修改项目中的build.gradle文件，将仓库地址替换为阿里云镜像。

在Angular8+Ionic4中嵌入Uniapp生成的H5，首先创建iframe页面：ionic g page pages/web-view。在页面模块中定义路由，然后使用DomSanitizer处理URL安全：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";

@Component({
  selector: 'app-web-view',
  templateUrl: './web-view.page.html',
  styleUrls: ['./web-view.page.scss'],
})
export class WebViewPage implements OnInit {
  url = 'http://localhost:8080/standardapp/#/';
  iframeUrl: any;

  constructor(private sanitizer: DomSanitizer) {
    this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

  ngOnInit() {
    window.addEventListener('message', (event) => {
      console.log("接收数据:", event.data);
      // 处理H5发送的数据
    });
  }
}

HTML中使用iframe绑定URL：

H5与Ionic通信可通过window.parent.postMessage发送数据，在Ionic中通过window.addEventListener('message', ...)接收。返回逻辑可结合历史记录处理：若URL未变化则使用navCtrl.pop()，否则调用window.history.back()。在iOS中显示iframe需在config.xml中添加。

Ionic4与Angular开发实战全指南

0 Answers