Ionic Navigator Launch 不起作用。我点击按钮，没有任何反应

Question

我正在努力开发一张卡片，当点击它时，可以从设备上打开任何地图应用程序，主要使用本教程：https://www.youtube.com/watch?v=BHBLjRuzb7s

虽然我编写了相同的代码，但它不起作用，因为当我单击按钮时没有任何反应。

这是我的 html 文件：

<div>
  <ion-card>
    <div>
      <img src="{{UnitLocal}}">
    </div>
    <ion-item>
      <button ion-button block (click)="navToMaps()">Universidade Tiradentes</button>
    </ion-item>
  </ion-card>
</div>

这是我的 ts 文件：

import { Component } from '@angular/core';

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator/ngx';

@Component({
  selector: 'unitmap',
  templateUrl: 'unitmap.html'
})
export class UnitmapComponent {
  private UnitLocal: string;
  private UnitEndereco: string;

  constructor(private launchNavigator: LaunchNavigator) {
    this.UnitLocal = this.getMap();
    this.UnitEndereco = "Universidade Tiradentes, Aracaju";
  }

  navToMaps() {
    console.log('Navegando para mapas');
    this.launchNavigator.navigate(this.UnitEndereco);
  }
}

当我通过浏览器运行应用程序时，我能够获取控制台日志，因此我假设按钮正确引用了 navToMaps。

Answer 1

您提到您正在使用 Ionic 3 和 Angular 5（检查您的 ionic.config.json 文件您的项目类型必须是 ionic-angular ），并且您似乎正在使用其 @ionic-native/launch-navigator，其版本>=5.0.0，支持 Ionic 4 和 Angular 6 以及项目类型 angular。

您需要使用较低版本的原生插件，应用才能正常工作。

先卸载插件

npm uninstall @ionic-native/launch-navigator

并为您的项目类型安装正确的版本。

npm i -s @ionic-native/launch-navigator@4.20.0

而且由于您没有使用 Angular 6，因此您不需要附加 ngx 和导入的结尾。

如下图

import { LaunchNavigator, LaunchNavigatorOptions } from '@ionic-native/launch-navigator';

另外，不要忘记将插件添加到您的应用模块的提供程序数组中。

参考：https://stackoverflow.com/a/54474247/6617276