拨打电话功能

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 { }  

 3） 在ts文件添加如下内容

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 bottom
			  icon: '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 bottom
          icon: 'close',
          handler: () => {
            console.log('Cancel clicked');
          }
        })
        .present();
    }
  }
}

 4）在app.module.ts文件添加如下内容

import { Util } from "../util/util";  
  
...  
  
@NgModule({  
    ...  
  
    providers: [  
    ...  
    Util,  
    ...  
    ]  
    ...  
})  
export class AppModule { }  

 5） 与html同名的ts文件添加如下内容

import {Util} from "../../util/util";

...

export class ts文件名 {
	constructor(...,private util: Util,...) {
	}

	...
	
	callNumberEvent(callNumber){
		 this.util.callNumberEvent(callNumber);
	}
}

 6）html直接在点击事件调用callNumberEvent方法