1.html方式
界面效果：直接跳转到拨号界面
<a href="tel:18212345678">在线客服</a>
2.ts方式
界面效果：下面有弹窗，选择后，直接拨打出去
实现方法
2.1调用与html同名的ts文件内方法
步骤
1）安装插件Call Number
输入以下命令
$ ionic cordova plugin add call-number
$ npm install --save @ionic-native/call-number安装后效果
2）在app.module.ts文件添加如下内容
import { CallNumber } from "@ionic-native/call-number"; ... @NgModule({ ... providers: [ ... CallNumber, ... ] ...
})
export class AppModule { }
import { AlertController, ActionSheetController } from "ionic-angular";
import { CallNumber } from "@ionic-native/call-number"...export class ts文件名 {constructor(...,private alertCtrl: AlertController,public actionSheetCtrl: ActionSheetController,private callNumber: CallNumber,...) {}...callNumberEvent(callNumber){if(callNumber == null || typeof callNumber === 'string' && callNumber.length === 0){this.alertCtrl.create({title: '温馨提示',message: '手机号码不能为空',buttons: ['确定']}).present();}else{this.actionSheetCtrl.create().setTitle('电话拨打').addButton({text: '拨打：' + callNumber,role: 'destructive',icon: 'navigate',handler: () => {this.callNumber.callNumber(callNumber, true).then(() => console.log('Launched dialer!')).catch(() => console.log('Error launching dialer'));}}).addButton({text: '取消',role: 'cancel', // will always sort to be on the bottomicon: 'close',handler: () => {console.log('Cancel clicked');}}).present();}}
}4）html直接在点击事件调用callNumberEvent方法
2.2调用封装util的ts文件内方法
步骤
1）安装插件Call Number
输入以下命令
$ ionic cordova plugin add call-number
$ npm install --save @ionic-native/call-number安装后效果
2）在“../src”新建“util”文件夹及文件。如下图：
3）util.ts文件如下：
import { Injectable } from '@angular/core';
import {AlertController, ActionSheetController} from "ionic-angular";
import {CallNumber} from "@ionic-native/call-number";/*** Utils类存放和业务无关的公共方法* @description*/
@Injectable()
export class Util {constructor(private alertCtrl: AlertController,public actionSheetCtrl: ActionSheetController,private callNumber: CallNumber){}callNumberEvent(callNumber){if(callNumber == null || typeof callNumber === 'string' && callNumber.length === 0){this.alertCtrl.create({title: '温馨提示',message: '手机号码不能为空',buttons: ['确定']}).present();}else{this.actionSheetCtrl.create().setTitle('电话拨打').addButton({text: '拨打：' + callNumber,role: 'destructive',icon: 'navigate',handler: () => {this.callNumber.callNumber(callNumber, true).then(() => console.log('Launched dialer!')).catch(() => console.log('Error launching dialer'));}}).addButton({text: '取消',role: 'cancel', // will always sort to be on the bottomicon: 'close',handler: () => {console.log('Cancel clicked');}}).present();}}
}4）在app.module.ts文件添加如下内容
import { Util } from "../util/util"; ... @NgModule({ ... providers: [ ... Util, ... ] ...
})
export class AppModule { }
import {Util} from "../../util/util";...export class ts文件名 {constructor(...,private util: Util,...) {}...callNumberEvent(callNumber){this.util.callNumberEvent(callNumber);}
}
