javascript - 正确处理 Angular 7+ 中的新“Bootstrap Toast”功能？

Question

我正在尝试将Bootstrap 4.2 Toast与 Angular 7 应用程序一起使用。我无法翻译 Angular 中的 Bootstrap 文档提供的 Jquery 示例。

目前，我在我的 HTML 模板中使用 Jquery 在我的组件准备好时调用$('.toast').toast('show')以显示所有 DOM 祝酒词，但我确信这是错误的方式。我想在 .component.ts 中显示 toasts 通知ngOnInit()，或者我可以在.component.ts中调用的其他函数。

例如，我想显示一个 toast 通知。

1 - 当前方法

toast.component.html

[...]

<div class="toast" id="toast" ...></div>

[...]

索引.html

[...]
<!-- Little hack to initialize Toast (according to the documentation) -->
<script>
$(document).ready(function(){
    $('#toast').toast('show');
});
</script>
[...]

2 - 所需的方法

toast.component.html

[...]

<div class="toast" id="toast" ...></div>

[...]

toast.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  templateUrl: './toast.component.html'
})
export class ToastComponent implements OnInit {

  ngOnInit() {
    // Here is a good way to show a toast notification right here ?
  }

}

这是一个显示当前行为的堆栈闪电战。

我知道这是最近的一个功能，但如果有人找到处理 Bootstrap Toasts 的好方法，那将非常感激 :)

标签： javascriptangularbootstrap-4angular7bootstrap-toast

Answer 1

最后，我使用了ng-bootstrap库中的Toast 模块来实现这个目的：

<ngb-toast header="Notification header">
  Content of the notification
</ngb-toast>