Angular 7- 自定义 Toastr - 找到合成属性 @flyInOut。在你的应用中包含 BrowserAnimationsModule答案

【问题标题】：Angular 7- Custom Toastr - Found the synthetic property @flyInOut. Include BrowserAnimationsModule in your appAngular 7- 自定义 Toastr - 找到合成属性 @flyInOut。在你的应用中包含 BrowserAnimationsModule
【发布时间】：2019-08-09 13:22:11
【问题描述】：

我想在某些操作后显示 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 中

【问题讨论】：

标签： angular notifications angular7 toastr

【解决方案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 中的一个示例中复制了这个。

检查这个堆栈闪电战

example

【讨论】：

【解决方案2】：

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

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

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

【讨论】：