在Angular中依次打开两个物化模态答案

【问题标题】：open two materialize modals successively in Angular在Angular中依次打开两个物化模态
【发布时间】：2018-06-24 20:35:19
【问题描述】：

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

我将两者都写成单独的组件

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

在buy-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",

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

【问题讨论】：

为什么要使用 angular-material 标签？看起来您使用的是 materializecss 而不是 Angular Material。

标签： angular materialize angular2-materialize

【解决方案1】：

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

【讨论】：