Question

我正在使用 Angular 6 来构建Web应用程序，并且我在样式中使用 Bootstrap 3 。我不没有为Bootstrap使用任何特定的Angular框架，例如UI Bootstrap或ng-bootstrap，我的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...');
});

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

有人知道在Angular应用程序中是否可行？

Answer 1

使用Angular绝对有可能。

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

您可以使用本教程获得更深入的知识：https://codecraft.tv/courses/angular/components/overview/

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

1 个答案: