открыть два материализованных способа последовательно в Angular

Question

Мне нужно открыть модал, показывающий ожидающую транзакцию, как только пользователь нажмет кнопку отправить транзакцию, и как только транзакция завершится, мне нужно отобразить компонент успешной транзакции.Режим ожидания транзакции работает нормально, но когда он меняется на успешную транзакцию, я просто получаю черное наложение.

Я записал оба компонента как отдельные

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

В транзакции-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-успешно.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, чтобы закрыть модал.