路由器链接重定向与Angular 6后如何关闭Bootstrap模式

Question

我正在开发我的第一个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指令重定向之前关闭该模式。

先感谢您。

Answer 1

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

data-dismiss="modal"