是否可以在 sweet alert 2 中添加整个 angular 组件？

Question

我想知道是否有办法让 angular 组件在甜蜜的警报框中打开，例如

 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
  });
}

是否可以在 sweet alert 2 中添加整个 angular 组件？

Is it possible to add an entire angular component inside sweet alert 2?

html

angular

angular9

sweetalert

sweetalert2