无法使用 Ionicframework 显示 Toast 消息

Question

我是移动开发领域的新手，我正在使用 ionic 框架。

我想做的就是按照此 tutorial 向用户显示祝酒消息，到目前为止，我只是疯狂地尝试实现它。

我得到的错误如下

Cannot read property 'toast' of undefined

我有installed科尔多瓦
我有 installed Toast 插件

在我的index.html里面我添加了ng-cordova.min.js

的脚本

  <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

我是否也需要在 index.html 中添加 Toast.js 文件？如果是，那也无济于事并导致另一个错误。

这是我的控制器

  .controller('UsersController', ['$scope', '$http', '$cordovaToast', function ($scope, $http, $cordovaToast) {

    $scope.showToast = function() {
      $cordovaToast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
          console.log('Success');
        }, function (error) {
          console.log('Error');
        });
    };
  }
  ]);

我在这里错过了什么？

非常感谢任何帮助。

更新

按照@Del的建议修改后出现如下错误

ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $cordovaToastProvider <- $cordovaToast <- UsersController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24cordovaToastProvider%20%3C-%20%24cordovaToast%20%3C-%20UsersController
    at ionic.bundle.js:13380
    at ionic.bundle.js:17574
    at Object.getService [as get] (ionic.bundle.js:17721)
    at ionic.bundle.js:17579
    at getService (ionic.bundle.js:17721)
    at invoke (ionic.bundle.js:17753)
    at Object.instantiate (ionic.bundle.js:17770)
    at ionic.bundle.js:22326
    at self.appendViewElement (ionic.bundle.js:56883)
    at Object.switcher.render (ionic.bundle.js:54995)

Answer 1

如果插件安装正确，我已经使用了，没有使用$cordovaToast

.controller('UsersController', ['$scope', '$http', function ($scope, $http) {

    $scope.showToast = function() {
      window.plugins.toast
        .show("Here's a message", 'short', 'center')
        .then(function(success) {
          console.log('Success');
        }, function (error) {
          console.log('Error');
        });
    };
  }
  ]);

您不必添加 ng-cordova 或 toast.js。

如果添加插件 (ionic plugin add ...)，移除平台，再次添加，然后构建，它应该可以工作

Answer 2

您正在尝试运行 $cordovaToast 在浏览器上。它不会工作，因为它是本机插件。请在真机或模拟器上使用。

Answer 3

我也是 ionic 的新手，但我对 android 知之甚少，所以我找到了如何在 ionic 中使用 android 函数的方法，这意味着我找到了从 [创建自己的插件的方法=10=]

所以在按照给定 link 的步骤后，我创建了一个自己的插件你可以看到它 ionic plug @ github.

您需要遵循 git link 中提到的简单 4 个步骤。

希望能帮助您解决同样的问题。

Answer 4

除非您为 $cordovaToast 注入依赖项，否则此错误在真实设备上也不会消失。您可以在控制器中使用或删除 $cordovaToast，它不会影响工作。保持依赖关系是一种很好的做法。所有响应中缺少的关键步骤是在 UsersControllers 所属的模块中为 ngCordova 引入 DI。 JSalaat 突出显示的示例具有此控制器

foodShop.controller('cartController', function($scope, cartFactory, $cordovaToast)

而且 foodshop 模块已经注入了 ngCordova。

var foodShop = angular.module('foodShop', ['ionic','firebase','ngCordova'])

由于插件属于ngCordova，所以不需要在controller中单独引入。这就解释了为什么那个应用程序没有错误。

在您的情况下，尝试创建应用程序实例可能看起来像

var app = angular.module('app', ['ionic','ngCordova'])

否则，您将继续遇到未知提供程序：$cordovaToastProvider 错误

Answer 5

备案：对于 Ionic v2/v3

安装依赖项
将其包含在离子项目中
如何使用。

1。安装依赖项

在 CLI 运行中使用以下命令：

$ ionic cordova plugin add cordova-plugin-x-toast

$ npm install --save @ionic-native/toast

2。将其包含在离子项目中

1.Add 下面到 app.module.ts

import { Toast } from '@ionic-native/toast';

.....然后到 @NgModule 部分 providers:[ HERE,]

2.Each要使用Toast的页面需要添加：

import { Toast } from '@ionic-native/toast';

..也添加到构造函数

constructor(private toast: Toast, ...){}

...现在您可以使用它，如下例所示：

this.toast.show('message', 'duration', 'position').subscribe();

...或向控制台发送消息：

this.toast.show('message', 'duration', 'position').subscribe(
  toast=>{
    console.log(toast);
  }
);

无法使用 Ionicframework 显示 Toast 消息

Unable to show Toast message using Ionicframework

toast

angularjs

cordova

ionic-framework

1。安装依赖项

2。将其包含在离子项目中