(ngx-bootstrap) Закрыть модальное, которое было создано с компонентом программно

Question

У меня есть приложение Angular 5, используя ngx-bootstrap. Я создаю два мода с использованием модального компонента. Мне нужно закрыть первый модал через некоторое время, а затем открыть второй модал.

Я попробовал оба из них, прежде чем открыть второй модальный, но...

• ... когда я использую this.modalService.hide(0) в компоненте я показываю модалы, ничего не происходит
• ... когда я использую this.modalService.hide(1) в компоненте, в котором я показываю модалы, второй модал открывается и закрывается сразу после

Также this.modalReference.hide() не делал этого

Любые предложения высоко ценятся!

Answer 1

Мне удалось заставить ваш сценарий работать со следующей реализацией

В app.component.html

<div bsModal #modalone="bs-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal ONe</h4>
            </div>
            <div class="modal-body">
                <button (click)="toggle()">Toggle</button>
            </div>
        </div>
    </div>
</div>

<div bsModal #modaltwo="bs-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Two</h4>
            </div>
            <div class="modal-body">
                <button (click)="toggle()">Toggle</button>
            </div>
        </div>
    </div>
</div>

В приведенных выше модальных разделах обратите внимание на две важные вещи; 1) Каждый модальный раздел имеет ссылку на модальную директиву через bsModal 2) есть ссылка на узел элемента с использованием #... Также обязательно, чтобы ссылка имела разные имена... В этом примере я решил использовать #modalone а также #modaltwo, Каждой ссылке здесь передается экземпляр ModalDirective,

В app.component.ts получить ссылку на модальные элементы, используя @ViewChild() декоратор с именем ссылки, использованным выше. (см. полную документацию здесь https://angular.io/api/core/ViewChild)

 @ViewChild('modalone') public modalone: ModalDirective;
 @ViewChild('modaltwo') public modaltwo: ModalDirective;

 // Required to toggle
 one: boolean = true;

В вашем ngAfterViewInit() крюк жизненного цикла переключает первый модальный с помощью show() функция. Первоначальный вызов show() выполняется в хуке жизненного цикла AfterViewInit, чтобы иметь под рукой узел элемента. Это включит первый модальный.

ngAfterViewInit(): void {
    this.modalone.show();
}

Добавьте простую функцию переключения (на которую ссылаются в модальном HTML выше) для переключения между двумя модальными режимами.

toggle() {
    if (this.one) {
        this.modalone.hide();
        this.modaltwo.show();
    } else {
        this.modalone.show();
        this.modaltwo.hide();
    }

    this.one = !this.one;
}

Это должно продемонстрировать переключение между двумя модалами, как вам нужно... Вот рабочий плункер https://plnkr.co/edit/F5oWAI?p=preview