Angular 7- Custom Toastr - 找到了合成的属性 @flyInOut。在您的应用中包含 BrowserAnimationsModule

Question

我想在执行某些操作后显示 toast 通知，但我希望显示自定义 toast 组件。我已经创建并配置如下：

在我的app.module中：

 imports: [
    ToastrModule.forRoot({
      positionClass: "toast-top-left",
      toastComponent: myCustomToastComponent
      }),
     ]
 entryComponents: [
   myCustomToastComponent
 ]

然后我有我的习惯component.ts：

import { Component, Input } from "@angular/core";
import { Toast, ToastrService, ToastPackage } from "ngx-toastr";

@Component({
  selector: "app-ribbon",
  templateUrl: "./ribbon.component.html",
  styleUrls: ["./ribbon.component.scss"]
})
export class myCustomToastComponent extends Toast {

  @Input() messageText: string;

  constructor( protected toastrService: ToastrService, public toastPackage: ToastPackage) {
    super(toastrService, toastPackage);
  }
}

html:

<div class="custom-ribbon-container">
    {{ messageText }}
</div>

和 css:

.custom-ribbon-container {
  border-color: green;
  -moz-border-radius: 15px;
  border-radius: 15px;
  width: 400px;
  height: 30px;
}

我在另一个组件中调用 toastr 服务：

showToaster() {
    this.toastr.success("testing toast message", "title");
  }
}

这是 html：

<button (click)="showToaster()">
      Show Toaster
    </button>

这里的问题是它不显示我的自定义 toast 组件，它显示 toastr 包中的默认组件。并在控制台上显示此错误：“Found the synthetic property @flyInOut. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application." 我缺少什么？

Pd: 我已经安装了 BrowserAnimations 并将其包含在 app.module

Answer 1

我认为这是自定义 toastr 的问题。 ngx toastr 需要一个 flyinout 动画，所以你需要添加一个。

animations: [
    trigger('flyInOut', [
      state('inactive', style({
        opacity: 0,
      })),
      transition('inactive => active', animate('400ms ease-out', keyframes([
        style({
          transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
          opacity: 0,
        }),
        style({
          transform: 'skewX(20deg)',
          opacity: 1,
        }),
        style({
          transform: 'skewX(-5deg)',
          opacity: 1,
        }),
        style({
          transform: 'none',
          opacity: 1,
        }),
      ]))),
      transition('active => removed', animate('400ms ease-out', keyframes([
        style({
          opacity: 1,
        }),
        style({
          transform: 'translate3d(100%, 0, 0) skewX(30deg)',
          opacity: 0,
        }),
      ]))),
    ]),
  ]

我从他们自己的示例中复制了这个 github。

检查这个 stackblitz

example

Answer 2

要显示您的自定义组件，您还需要传入自定义 toastr 组件：

showToaster() {
this.toastr.success("testing toast message", "title", {toastComponent: MyCustomToastComponent});
}}

查看选项：https://www.npmjs.com/package/ngx-toastr

Angular 7- Custom Toastr - 找到了合成的属性 @flyInOut。在您的应用中包含 BrowserAnimationsModule

Angular 7- Custom Toastr - Found the synthetic property @flyInOut. Include BrowserAnimationsModule in your app

notifications

toastr

angular

angular7

Angular 7- Custom Toastr - 找到了合成的 属性 @flyInOut。在您的应用中包含 BrowserAnimationsModule

Angular 7- Custom Toastr - Found the synthetic property @flyInOut. Include BrowserAnimationsModule in your app

notifications

toastr

angular

angular7

Angular 7- Custom Toastr - 找到了合成的属性 @flyInOut。在您的应用中包含 BrowserAnimationsModule