标签: angular-toastr

我的应用程序中显示了 toastr 成功和错误消息。我更改了背景颜色和字体颜色。我想更改消息中显示的图标颜色。我到处搜索这个，但我找不到改变图标的​​填充颜色或至少改变图标的​​方法。以下是成功消息的截图

下面是错误消息，

我想更改这些消息中显示的图标，更改图标的填充颜色。js文件中的代码，

.success(function(data) {
     toastr.success('Successfully Build ', 'Congratulations!', {
                        closeButton: true
                    });
}).error(function(err) {
    toastr.error('Cant Build', 'Error', {
                        closeButton: true
                    });

在CSS中，

#toast-container > .toast-success {
    background-image: none;
    background-color: #e9e9e9;
    color: black;
}
#toast-container > .toast-error {
    background-image: none;
    background-color: #e9e9e9;
    color: red;
}

我正在使用Angular toastr，但在隐藏上一个 toastr 和显示下一个 toastr 之间遇到了延迟。一次应该只有一个烤面包机。我隐藏并显示它，但没有视觉差异，并且吐司消息仍然相同，用户无法区分哪个是前一个吐司，哪个是下一个吐司。我用两个功能解雇他们。任何帮助，将不胜感激。

这是我的设置：

        autoDismiss: true,
        maxOpened: 2,
        newestOnTop: true,
        extendedTimeOut: 1000,
        tapToDismiss: false,
        timeOut: 5000

我喜欢原始的烤面包机b / c，我可以弹出“已保存X项”消息，并在重定向回主页后在页面上保留X毫秒。因此，我想将原始的Toastr库与Angular 5结合使用，无法解决。是否有博客文章或在线示例显示此内容？

注意：我知道有npm软件包，例如angular2-toaster和其他一些软件包，但是当我尝试使用Angular 5 CLI安装和运行它们时，会出现许多错误消息，当我查看其Github页面时，它们存在未解决的问题，并且似乎Ag5在没有分析源代码并将其破解之前还无法工作的地方已经进行了足够的重大更改（而且我显然不是npm专家）。好像他们使用的是Ag4，但不是使用的是Ag5？

由于toastr是标准的JS库，为什么我不能只在angluar-cli.json“ scripts”中添加指向min.js文件的链接，并显示标准的弹出式窗口，就像SPA之前的过去一样？今晚，我已经下载了许多此类npm库并与之抗争，似乎要使用已经存在多年的标准库要困难得多。

谢谢。

我想在我的角度2应用程序中使用ng2-toastr.我已按照所有说明操作,但toastr无法显示没有任何控制台错误.我还读过一些地方,ng-toastr不再适用于角度2,但没有找到任何有效的文档.我搜索了类似的问题,但没有找到任何合适的答案来解决我的问题.任何帮助,将不胜感激.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import{ ToastModule} from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import "hammerjs"

import { CoreModule } from './core/core.module';

import { MODULE_ROUTES, MODULE_COMPONENTS } from './app.router'

@NgModule({
  declarations: [
    MODULE_COMPONENTS
],
imports: [
   BrowserModule,
   FormsModule,
   HttpModule,
   RouterModule.forRoot(MODULE_ROUTES),
   BrowserAnimationsModule,
   CoreModule,
   ToastModule.forRoot()
],
providers: [ ],
bootstrap: [MODULE_COMPONENTS]
})
export class …

我可以ToastrService.success/error/warning/info()毫无问题地使用，

但是当我使用时，我ToastrService.show()不知道应该发送哪种正确的字符串类型

我尝试发送这样的枚举：

export enum ToastType {
    Success = 'success',
    Error = 'error',
    Info = 'info',
    Warning = 'warning'
}

但是组件丢失了样式。

错误 TS2416：类型“ToastInjector”中的属性“get”无法分配给基本类型“Injector”中的同一属性。

输入 \'(token: any, notFoundValue?: T, flags?: InjectFlags) => ToastPackage | T\' 不可分配给类型 \'{ （令牌：ProviderToken，notFoundValue：未定义，选项：InjectOptions & { 可选？： false; }）：T；（令牌：ProviderToken，notFoundValue：null，选项：InjectOptions）：T；（令牌：ProviderToken <...>，notFoundValue？：T，选项？：InjectOptions | InjectFlags）：T；（令牌：ProviderToken<...>，而不是Fou...\'。

Types of parameters \'flags\' and \'options\' are incompatible.\n  Type \'InjectOptions & { optional?: false; }\' is not assignable to type \'InjectFlags\'.\n

toast-injector.ts

import {Injector, InjectFlags} from \'@angular/core\xe2\x80\x99;\n\nimport { ToastPackage } from \'./toast-config\';\n\n\n\nexport class ToastRef<T> {\n\nexport class ToastInjector implements Injector {\n\n  constructor (\n\n    private _toastPck: ToastPackage,\n\n    private _parntInjtr: Injector\n\n  ) {}\n\n\n  //eslint-disable-next-line\n\n  get<T> …

我有一个页面，其中可能toasts使用插件https://github.com/CodeSeven/toastr动态添加了多个页面。

单击该链接时，我在每个祝酒词上都有一个link（确定），我只需要关闭特定的（toast不是全部）toast可见的即可。

toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear();
});

在上面的代码中，我使用了toastr.clear()清除所有吐司的方法。

谁能帮我识别一下toast“ OK” link并仅清除该吐司吗？

更新＃1：

我尝试了@imjosh给出的答案，但是$(this).closest('.toast')找到了正确的吐司，但toastr.clear($(this).closest('.toast'));没有关闭任何吐司。

如果我将烤面包存储object在一个变量中，并将其作为参数传递给toastr.clear()它，那么它将起作用。但是，我不知道如何以这种方式处理多个吐司。

var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", …