标签: toastr

基于之前关于将toastr注入您的应用程序/控制器的SO文章.我已经设置了我的app.js如下:

(function () {

   app = angular.module("app", ['breeze.angular']).value('ngToastr', toastr);

    //added toaster as factory so it can be injected into any controller
   angular.module('app').factory('ngNotifier', function (ngToastr) {
       return {
           notify: function (msg) {
               ngToastr.success(msg);
           },
           notifyError: function (msg) {
               ngToastr.error(msg);
           },
           notifyInfo: function (msg) {
               ngToastr.info(msg);
           }
       }
   });

})();

作为所述答案之一,我现在可以从任何控制器访问toastr控件.

app.controller('reportController', function ($scope, reportLibraryService, ngNotifier,  $log) {
    //report section


    var rvm = this;
    rvm.getReportList = GetReportList;
    rvm.onError = OnError;
    rvm.onReportComplete = OnReportComplete;

    $scope.userId = 1;
    GetReportList($scope.userId);

    function …

我正在将项目转换为Typescript.我遇到了toastr的问题.

import {toastr} from "toastr";

我用Nuget下载了typescript定义文件并将其包含在项目中.

它在文件末尾有这个导出:

declare var toastr: Toastr;
declare module "toastr" {
export = toastr;
}

但是,我得到编译时错误: Modle "toastr" has no exported member 'toastr'

我该如何解决这个问题？

由于ember不喜欢的直接dom操作,弹出库是不是与Ember一起工作的？有没有像这样的其他库可以很好地与ember一起使用？

编辑

即使通过下面发布的工作示例,我也无法在本地工作.我终于使用了Pine Notify,它可以直接使用.

我收到了关于如何在toast点击时做出反应的消息,所以我决定在这里为每个人发布.

当用户点击时,toast我并不总是希望消息消失,但取决于我想要的消息类型:

• 消失.
• 将用户重定向到另一个页面(x es/meetings/210)显示一个jquery对话框(例如:显示收到的短信).

使用基本点击事件我无法检测到toast我点击了.我找到的唯一解决方法是在toast中添加一个链接,并在用户点击它时进行重定向.

所以我要问的是通过使用基本点击事件来获取用户点击的当前吐司的方法(但这可能需要更多工作隐藏数据在吐司中以便在单击时恢复它以了解要做什么),或者通过添加到创建toast的函数,单击时可以对函数进行可选的回调,如下所示:

toastr.error(
'body text', 
'header text', 
click: function() {
console.log('you clicked on the error toaster')
}
);

谢谢你这个非常好的图书馆.

我有这个示例html文件.我在这里使用角度吐司通知.我面临的问题是Toast消息总是出现在右上角位置.

script.js文件包含

    angular.module('main', ['ngAnimate', 'toaster']).controller('myController', function($scope,toaster, $window) {

        $scope.pop = function(){
            toaster.pop('success', "title", 'message');
        };

        $scope.clear = function(){
            toaster.clear();
        };
    });

请找到plunker链接http://plnkr.co/edit/pzuW5OVkoxLF7zl0mGaC?p=preview

提前致谢

toastrjs悬停后我找不到任何正确的方法来更新计时器。我确定 aextendedTimeOut到 0，toastr当我将鼠标悬停在它上面时不关闭它。timeOut oftoastr是 10000 毫秒，但是当我完成悬停时，toastr立即隐藏起来。toastr在我完成悬停后显示10000 毫秒的正确方法是什么。

我的 toastr 属性示例：

const inboxToastr = toastr;
inboxToastr.info(data.bubbleData, title, {
    "tapToDismiss": false,
    "closeButton": true,
    "newestOnTop": false,
    "progressBar": false,
    "positionClass": "toast-bottom-left", //position
    "preventDuplicates": false,
    "onclick": null,
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "10000",
    "extendedTimeOut": "0",
    "hideEasing": "linear",
    "iconClass": "background-gray"
});

我知道这不是 toastr（或一般的 toast 通知）的用途，但我想将它们用作modal notification. 我的想法如下。

在吐司秀上：

toastr.options.onShown = function() { //Create an overlay on the entire page}

覆盖：

#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}

并在吐司关闭：

toastr.options.onHidden = function() { //make overlay go away }

另外，我将 toast 的超时设置为 0，这样它就不会自行消失。

问题：我希望 Toast 通知保持在覆盖层之上而不是在其后面，因为覆盖层将覆盖所有内容。我该怎么做？

我想在一次显示的多个 toastr 消息中清除/隐藏单个 toastr 消息。是否有任何解决方法，而不是同时清除整个/多个 toastr 消息。我尝试了以下代码，但对我不起作用。

toastr.clear([toast]);

参考：https : //github.com/Foxandxss/angular-toastr

我的应用程序中弹出通知，我希望当新通知出现时，隐藏旧通知（我不希望同时显示两个通知）。

如何用toastr达到这样的效果？

我已经成功地通过 ngx-toaster 显示了 toast。我根据 id 和任务代码显示各种类型通知的烤面包机。

我尝试获取点击回调和操作回调，但没有找到任何回报。

onNotificationReceived(res) {
        let key;
            switch (key) {
                case 1:
                    showSuccessPopup(res.title,res.body);
                    break;

                default:
                    break;
            }
    }

showSuccessPopup(title,body) {
        this.toastr
            .success(title, body, { closeButton: true })
            .onTap.subscribe((action) => console.log(action))
    }

实际结果：显示 Toast

预期：显示了 id toast