我如何在 Angular Universal 上做 Bootstrap 或 Material、Materialize 的模态或 toast答案

【问题标题】：How on Angular Universal I can do modal or toast of Bootstrap or Material, Materialize我如何在 Angular Universal 上做 Bootstrap 或 Material、Materialize 的模态或 toast
【发布时间】：2021-06-14 18:59:25
【问题描述】：

如何在 Angular Universal 中使用模态？ Toasts、下拉菜单——所有适用于 DOM 和我们库 js 的东西？

我在实现代码时遇到问题

import { Toast } from '../../../../../node_modules/bootstrap/dist/js/bootstrap.min.js'
import {DOCUMENT, isPlatformBrowser} from "@angular/common";
  
export class ToastComponent implements OnInit, AfterViewInit {
  @ViewChild('toast') toast: ElementRef<HTMLDivElement>

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              @Inject(DOCUMENT) private _doc: Document) {

    if (isPlatformBrowser(this.platformId)) {

      console.log('getWindow', this.getWindow())
      console.log('this.getWindow().document', this.getWindow().document)
      
      // var toastElList = [].slice.call(document.querySelectorAll('.toast'))
      // var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(this.toast, {}) //error in this 1 variant
      // })


      // Array.from([this.toast])
        // .forEach(toastNode => new Toast(toastNode))

      return new Toast(this.toast); //error in this 2 variant


    }
  }


  getWindow(): Window | null {
    return this._doc.defaultView;
  }

}

【问题讨论】：

您是否需要在已打开模式的情况下呈现您的页面服务器端？
不，大卫。我不需要在服务器端呈现此页面。
那么你的问题到底是什么？如果您像使用 isPlatformBrowser 检查一样包装代码，它应该可以工作。您还可以查看 angular bootstrap lib，例如 ng-bootstrap (ng-bootstrap.github.io)
不幸的是 isPlatformBrowser 对我不起作用。现在我将尝试另一种方法。
请看这个：stackoverflow.com/questions/67932321/…

标签： angular twitter-bootstrap bootstrap-modal toast angular-universal

【解决方案1】：

安装和使用 Bootstrap（最新，@types）的任何变体都不适合我。

我安装了 Angular Material 并使用它 SnackBar，它工作正常。

https://material.angular.io/components/snack-bar/examples

我从 Angular Universal 中删除 Bootstrap 是一场噩梦。 3天无所事事。

【讨论】：