离子呼叫号插件

Question

我正在尝试使用Ionic电话号码本机插件

https://ionicframework.com/docs/native/call-number/

我安装了插件，在app.module.ts和mypage.ts上导入了它，我还将它添加到app.module提供者中。

这里是我的profil.ts，您应该关注callhim函数：

   import { Component, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import { EditaccountPage } from '../editaccount/editaccount';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { Observable } from 'rxjs/Observable';
import { CallNumber } from '@ionic-native/call-number';

import * as _ from 'lodash';  
/**
 * Generated class for the MyaccountPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()

@Component({
  selector: 'page-profil',
  templateUrl: 'profil.html',
})
export class ProfilPage {


  public myAccountData;
  public profilId;

  public showInfoPers=true;
  public showMetiers=false;
  public showServices=false;
  public colorInfo= "#3f4996";
  public colorMetiers= "#fff";
  public colorServices= "#fff";

  constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage: NativeStorage,  public authServiceProvider: AuthServiceProvider, public changeDetectorRef: ChangeDetectorRef, private call: CallNumber) {

  }

  ionViewDidEnter() {
    var th;
    this.profilId = this.navParams.get('profilId');
    console.log(this.profilId);
    th=this.authServiceProvider.getData("userbyid/40").subscribe( myData => {
      console.log(myData.username);
      this.myAccountData=myData;
      this.myAccountData.username=this.capitalizeFirstLetter(this.myAccountData.username);
    });

  }

  async callhim():Promise<any>{
    try {
      const res = await this.call.callNumber("0557123656", true);
      console.log(res);
    } catch (err) {
      console.log(err);
    }
 }
  capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}
  selectedInfo(){
    this.showInfoPers=true;
    this.showMetiers=false;
    this.showServices=false;
    this.colorInfo="#3f4996";
    this.colorMetiers="#fff";
    this.colorServices="#fff";
    this.changeDetectorRef.detectChanges();
  }
  selectedMetiers(){
    this.showInfoPers=false;
    this.showMetiers=true;
    this.showServices=false;
    this.colorInfo="#fff";
    this.colorMetiers="#3f4996";
    this.colorServices="#fff";
    this.changeDetectorRef.detectChanges();
  }
  selectedServices(){
    this.showInfoPers=false;
    this.showMetiers=false;
    this.showServices=true;
    this.colorInfo="#fff";
    this.colorMetiers="#fff";
    this.colorServices="#3f4996";
    this.changeDetectorRef.detectChanges();
  }

}

以及我在使用callhim函数的部分中注释的完整页面：

<ion-header>

    <ion-toolbar >


        <ion-grid>
            <ion-row>
              <ion-col push-4 col-4>
                  <img class="profilpic" src="assets/imgs/profilpics/{{myAccountData?.profilpic}}.png"/>
                  <p class="username" text-center>{{myAccountData?.username}} </p>
              </ion-col>


            </ion-row>

            <ion-row >
                <ion-col col-4  class="pro1" text-center ion-button [style.color]="colorInfo" (tap)="selectedInfo()"> INFO. PERS.</ion-col>
                <ion-col col-4  class="pro2" text-center ion-button [style.color]="colorMetiers" (tap)="selectedMetiers()"> METIERS</ion-col>
                <ion-col col-4  class="pro1" text-center ion-button [style.color]="colorServices" (tap)="selectedServices()"> SERVICES</ion-col>
              </ion-row>

        </ion-grid>

    </ion-toolbar>


</ion-header>
<ion-content no-padding>
        <ion-fab bottom right > 
             <!-- HERE GUYS-->       <ion-icon (click)="callHim()" name="call" ion-fab></ion-icon> /// Here Guys
              </ion-fab>
  <ion-grid class="myContent" *ngIf="showInfoPers">

        <ion-row class="profileElements">
            <ion-col col-4 class="userInfo">
                <p class="left">Nom complet</p>
            </ion-col>
            <ion-col col-8 class="userInfo">
                <p class="right">{{myAccountData?.firstname}} {{myAccountData?.lastname}}</p>
            </ion-col>
        </ion-row>
        <ion-row class="profileElements">
            <ion-col col-4 class="userInfo">
                <p class="left">Sexe</p>
            </ion-col>
            <ion-col col-8 class="userInfo">
                <p class="right">{{myAccountData?.sexe}}</p>
            </ion-col>
        </ion-row>
        <ion-row class="profileElements">
            <ion-col col-4 class="userInfo">
                <p class="left">Date de naissance</p>
            </ion-col>
            <ion-col col-8 class="userInfo">
                <p class="right">{{myAccountData?.birth}}</p>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ion-grid class="myContent" *ngIf="showMetiers">

            <ion-row class="profileElements">
                <ion-col col-4 class="userInfo">
                    <p class="left">Metier Principale</p>
                </ion-col>
                <ion-col col-8 class="userInfo">
                    <p class="right">Plomberie</p>
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid class="myContent" *ngIf="showService">

                <ion-row class="profileElements">
                    <ion-col col-4 class="userInfo">
                        <p class="left">Metier Principale</p>
                    </ion-col>
                    <ion-col col-8 class="userInfo">
                        <p class="right">Plomberie</p>
                    </ion-col>
                </ion-row>
            </ion-grid>
</ion-content>

但不知怎么的，它不起作用了--这是错误日志：

vendor.js:1703 ERROR TypeError: _co.callHim is not a function
    at Object.eval [as handleEvent] (ProfilPage.ngfactory.js:197)
    at Object.handleEvent (vendor.js:13608)
    at Object.handleEvent (vendor.js:14335)
    at dispatchEvent (vendor.js:10057)
    at vendor.js:10671
    at HTMLElement.<anonymous> (vendor.js:38626)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (vendor.js:4973)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
defaultErrorLogger @ vendor.js:1703
ErrorHandler.handleError @ vendor.js:1764
IonicErrorHandler.handleError @ vendor.js:130253
dispatchEvent @ vendor.js:10061
(anonymous) @ vendor.js:10671
(anonymous) @ vendor.js:38626
t.invokeTask @ polyfills.js:3
onInvokeTask @ vendor.js:4973
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2

我用的是Ionic 3.2.0和Cordova 8.0.0

Answer 1

在您的方法中使用async await。您不需要添加.then and .catch already.

async callhim(): Promise<any> {
   try {
     const res = await this.call.callNumber("0557123656", true);
     console.log(res);
   } catch (err) {
     console.log(err);
   }
}

如果您想了解有关异步和等待的更多信息，可以在这里阅读https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9。