【发布时间】：2018-11-16 19:21:08
【问题描述】：
我正在尝试使用 Ionic Call Number Native 插件
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 函数的部分评论了完整的 profil.html 页面：
<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
【问题讨论】：
标签： typescript ionic-framework ionic-native