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

在成功购买的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接口和ngOnDestroy方法来关闭模态。

在Angular中依次打开两个实体化模态

1 个答案: