使用Angular 6进行routerlink重定向后如何关闭引导模式

Question

我正在开发我的第一个 Angular 应用程序。我有一个带有按钮的 Bootstrap 模式，该按钮重定向到应用程序的另一部分。

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

问题是，当我被重定向到该部分时，模态仍然以某种方式处于启用状态，并且整个部分都被模态背后的典型灰色透明度所覆盖，并且我不允许按下任何按钮或对此执行任何操作“联系人”部分。

我尝试使用 jQuery 和 modal() 函数关闭模式，在我的 component.ts 上使用此方法，在按钮的（单击）事件上。

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

点赞here

但它不起作用。

我找到的一个解决方案是使用带有 href 属性的链接而不是那个按钮。这样页面会再次加载，然后，当我被重定向到该部分时，不会激活任何模式：

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

但我不喜欢它，因为它破坏了 Angular 的异步优势，我想在通过 routerLink 指令重定向之前找到一种方法来关闭该模式。

提前谢谢你。

Answer 1

将以下属性添加到您的按钮以在单击时关闭模式：

data-dismiss="modal"