单击时未显示引导吐司（Angular）答案

【问题标题】：Bootstrap toast not shown on click (Angular)单击时未显示引导吐司（Angular）
【发布时间】：2022-04-12 21:24:55
【问题描述】：

我正在尝试通过关注 documentation 来显示一个简单的 Toast 点击

创建服务后

从 '@angular/core' 导入 { Injectable, TemplateRef };

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  toasts: any[] = [];

  show(textOrTpl: string | TemplateRef<any>, options: any = {}): any {
    this.toasts.push({ textOrTpl, ...options });
  }

    remove(toast: any): any {
    this.toasts = this.toasts.filter(t => t !== toast);
  }
}

我正在尝试从negozio.component 中的模态(click) 调用toast

看起来像这样：

     ...
    <button
      type="button"
      class="btn btn-success"
      (click)="showToast(addedToast)"
    >
      Aggiungi al carrello
    </button>
  </div>
</ng-template>

<ng-template #addedToast>
  <i class="material-icons">check_circle_outline</i>
  {{ modalContent.desc }} Aggiunto
</ng-template>

我的 showToast 函数如下所示：

  showToast(toast: any): void {
    this.toastService.show(toast, { classname: 'bg-success text-light', delay: 15000 });
  }

但它没有任何效果，没有显示 toast，但是调用了 on click 方法，就好像我在 showToast() 中放置了一个警报一样，它将被显示...

【问题讨论】：

请检查：therichpost.com/angular-10-bootstrap-toast-working-example

标签： angular angular-ui-bootstrap

【解决方案1】：

您可以使用 ngx-toastr，而不是实现自己的 ToastrService。 https://www.npmjs.com/package/ngx-toastr

演示：https://ngx-toastr.vercel.app/

示例用法：

export class YourComponent {
  constructor(private toastr: ToastrService) {}
 
  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

【讨论】：

【解决方案2】：

我试图将上面的代码粘贴到 component.module.ts 中，这导致了这个错误。移至 app.module.ts 后为我工作。

【讨论】：