Angular 6 - 显示模态时滚动到顶部

Question

我使用Angular 6构建一个Web应用程序，我使用Bootstrap 3作为我的样式。我没有像UI Bootstrap或ng-bootstrap那样使用Bootstrap的任何特定Angular框架，我只在我的index.html中引用了Bootstrap 3的CDN。

现在我正在展示模态，这很棒。但是，我希望在显示每个模态时触发一些代码。

目前，我在confirm.component.ts文件中有以下代码：

$('#confirmModal').on('shown.bs.modal', function() {
  console.log('Modal is shown...');
});

这非常有效，当显示此模态时，它会打印到控制台。但是，如果我将下面的代码添加到我的app.component.ts文件中，则在显示模态时不会触发。我希望app.component.ts能够成为我整个项目的全球组成部分。

$('.modal').on('shown.bs.modal', function() {
  console.log('Modal is shown...');
});

我想要实现的是拥有一段代码，只要显示任何模态，就会触发该代码。我可以将我在第一个示例中使用的代码复制到我的Web应用程序中的每个模态中，但理想情况下，这是我想要避免的。

有谁知道这是否可以在Angular应用程序中使用？

Answer 1

这绝对可以与Angular一起使用。

您可以为Modal创建单独的组件，将输入和输出事件与create component绑定。然后，该组件可以在其他组件中重用。