angular - 在 Angular 中连续打开两个物化模态

Question

一旦用户点击发送交易，我需要打开一个显示待处理交易的模式，一旦交易完成，我需要显示交易成功组件。 交易挂起模式工作正常，但当它更改为交易成功时，我只得到一个黑色覆盖。

我把它们都写成单独的组件

<div *ngIf="txnStatus=='pending'">
    <transaction-pending></transaction-pending>
</div>
<div *ngIf="txnStatus=='success'">
    <bought-successfully [transaction]="transaction"></bought-successfully>
</div>

在transaction-pending.component.ts中

 ngOnInit() {
    $('#txn-pending1').modal();  
    $('#txn-pending1').modal('open');
    console.log("transaction pending component loaded");
  }
 ngOnDestroy() {
    console.log("closing pending modal");
    $('#txn-pending1').modal('close');
  }

在 bought-successfully.component.ts 中

 ngOnInit() {
    console.log("opening the txn success modal");
    $('#txn-bought').modal(); 
    $('#txn-bought').modal('open');            
    console.log("transaction recieved to bought successfully component ",this.transaction);
  }

  ngOnDestroy(){
    console.log("closing the success modal");
    $('#txn-bought').modal('close');
  }

此组件被成功调用，因为我可以看到控制台中打印了日志，但模态没有出现，只出现了一个深色覆盖层。

版本

1."angular2-materialize": "^15.1.10", 2."materialize-css": "^0.100.2",

我试过单独调用购买成功的组件，它工作正常，在交易挂起组件之后调用它时出现问题。

Answer 1

似乎第一次处于挂起状态时，您已经创建了组件并在 ngOnInit 上声明了他的模态状态。 第二次在成功状态下你做了同样的事情，但是来自第一个组件的模式仍然处于事件状态。 尝试实现 OnDestroy 接口(interface)和方法 ngOnDestroy 来关闭模态。