3

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

我已经把它们写成单独的组件

<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”，

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

4

1 回答 1

0

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

于 2018-06-24T21:05:51.147 回答