是否可以在 Sweet Alert 2 中添加整个角度组件？

Question

例如，我想知道是否有一种方法可以使角度组件在甜蜜的警报框中打开

 Swal.fire(
  {
    HTML: '<app-exampleselector></app-exampleselector>',
  })

我的目的是使用组件选择器，而不是在函数内编写代码，这反过来不是一个选项，因为我打算使用很多函数，包括数据库服务函数，这使得代码相当庞大。有没有办法做到这一点？或者我应该决定在新选项卡上打开该组件吗？

Answer 1

答案是或多或少！

但它不像你的例子。如果需要，您可以在将触发警报的其他组件内实例化您希望出现在警报中的组件。放置一个模板引用（例如#myAlert），使用@ViewChild获取引用并将引用传递给html参数上的sweetalert：

//app.component.html
<div style="display: none;"> <!--YOU NEED TO PUT THE COMPONENT INSIDE A HIDDEN DIV-->

<app-my-alert-content #myAlert [inputSomething]="inputSomething"></app-my-alert-content>    
</div>

------------------------
//app.component.ts

import Swal from 'sweetalert2';

@ViewChild('myAlert',{static: false})
myAlert: ElementRef;

triggerAlert(){
  Swal.fire({
    html: this.myAlert.nativeElement
  });
}