Ionic2 - 使用Cordova插件

Question

我只是想使用这个Cordova插件：

https://github.com/Rohfosho/CordovaCallNumberPlugin

为此，我创建了一个Ionic2全新项目：

$ ionic start ionic2-callnumber sidemenu --v2
$ cd ionic2-callnumber
$ ionic platform add android --save
$ ionic plugin add https://github.com/Rohfosho/CordovaCallNumberPlugin.git

在这个插件的网页上：

https://github.com/Rohfosho/CordovaCallNumberPlugin

他们说：

Use the plugin in your JS file:

window.plugins.CallNumber.callNumber(onSuccess, onError, number, bypassAppChooser);

然后我做了：

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

    phone: string;

    constructor( public navCtrl: NavController ) {
        this.phone = "2129442720";
    }

    callNumber() {
        window.plugins.CallNumber.callNumber(
            function( result ) {
                console.log( "Success:" + result );
            },
            function( result ) {
                console.log( "Error:" + result );
            },
            this.phone,
            true
        );
    }
}

home.html的

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>

  <div>
      <button ion-button secondary (click)="callNumber()">Call Number</button>
      <textarea style="width:100%;height:100px;">{{phone}}</textarea>
  </div>

</ion-content>

但是当我这样做时：

$ ionic run android

我收到以下错误：

我的问题是：

[1/2]如何在这个项目中使用这个插件？

在这里，您有一个我为测试创建的项目的链接：

https://github.com/napolev/ionic2-callnumber

[2/2]鉴于Cordova插件，我怎么知道我需要调用插件的方式？

例如，对于这个其他插件： @ionic-native/file-path

https://github.com/hiddentao/cordova-plugin-filepath

你使用它的方式如下：

constructor(
    ...,
    private filePath: FilePath
    ...,
) {
    ...
}

...

this.filePath.resolveNativePath(imagePath).then(imagePath => {
    this.cameraUrl = imagePath;
    this.photoSelected = true;
    this.photoTaken = false;
});

我的意思是，它与第一个插件不同，它们指定：

window.plugins.CallNumber.callNumber(...);

Answer 1

Ionic拥有各种Cordova插件的实现，称为Ionic Native（您可以通过https://ionicframework.com/docs/native访问）。

鉴于您可以使用以下步骤安装Ionic Native Call Number插件： ionic plugin add --save call-number和npm install --save @ionic-native/call-number

然后你可以使用它：

 import { CallNumber } from '@ionic-native/call-number'; constructor(private callNumber: CallNumber) { } this.callNumber.callNumber(18001010101, true) .then(() => console.log('Launched dialer!')) .catch(() => console.log('Error launching dialer'));