Как закрыть модал Bootstrap после перенаправления routerlink с Angular 6 - PullRequest
0 голосов
/ 24 августа 2018

Я занимаюсь разработкой своего первого приложения Angular. У меня есть модальный Bootstrap с кнопкой, которая перенаправляет в другой раздел приложения.

<button type="button" class="btn btn-info btn-lg" routerLink="/contactar">Contáctenos</button>

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

Я пытался закрыть модальное окно с помощью функций jQuery и modal (), с помощью этого метода на моем component.ts, при событии (click) кнопки.

closeModal()
{
    let mod=$(".modal")[0];
    mod.modal('hide');
} 

Как это:

<button type="button" class="btn btn-info btn-lg" (click)="closeModal()" routerLink="/contactar">Contáctenos</button>

Но выдает ошибку «Свойство модальное не существует для элемента типа HTML».

Я тоже пытался сделать:

npm install -D @types/bootstrap

Как и предполагалось здесь

Но это не работает.

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

<a type="button" class="btn btn-info btn-lg" href="/contactar">Contáctenos</a>

Но мне это не нравится, так как оно нарушает асинхронные преимущества Angular, и я хотел бы найти способ закрыть этот мод, прежде чем я буду перенаправлен через директиву routerLink.

Заранее спасибо.

1 Ответ

0 голосов
/ 24 августа 2018

Добавьте следующий атрибут к вашей кнопке, чтобы закрыть модальное окно при нажатии:

data-dismiss="modal"

...