html - 是否可以在甜蜜警报 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
  });
}