javascript - 在 Angular 应用程序中全局使用ngx-toastr

我在Angular 7应用中使用以下Toastr实施：https://www.npmjs.com/package/ngx-toastr

我试图弄清楚如何使所有吐司附加到正文或其他将在我的根应用程序组件中的div元素（即使在调用它们的组件将要显示的情况下，我也希望它们保持显示状态被摧毁）。

有什么办法可以存档吗？

最佳答案

正如链接中的自述文件所述，您需要提供自己的ToastrContainer。

import {
    ToastrModule,
    ToastContainerModule // Add this one
} from 'ngx-toastr';


@NgModule({
  declarations: [AppComponent],
  imports: [
    //...
    ToastContainerModule // Add this one
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

并将div添加到您的根组件（或您希望容器位于的任何位置）中，如下所示：

@Component({
  selector: 'app-root',
  template: `
  <h1><a (click)="onClick()">Click</a></h1>
  <div toastContainer></div> <!-- Add this line here, above should be your router -->
`
})
export class AppComponent implements OnInit {
  // Get a reference to the directive
  @ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;

  constructor(private toastrService: ToastrService) {}
  ngOnInit() {
    // Register the container
    this.toastrService.overlayContainer = this.toastContainer;
  }
  onClick() {
    this.toastrService.success('in div');
  }
}

关于javascript - 在 Angular 应用程序中全局使用ngx-toastr，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55475175/