Question

我开始研究我的应用程序上大学时遇到一些问题，试图在不同组件的代码中打开Bootstrap模式。我在同一组件的代码中打开组件没有问题。我使用jquery，它工作得很好：

hideLoginModal(){
$('#myModal').modal('hide');
}

当您单击NavigationComponent中的导航栏按钮时，需要弹出和隐藏模态。问题是＆＃34; LoginModal＆＃34;并且所有登录的功能都应该在AccountComponent中，现在我已经将它们卡在了NavigationComponent中。

所以我试图移动我的＆＃34; LoginModal＆＃34; html和hideLoginModal（）函数+其他登录功能到AccountComponent / AccountService和NavigationComponent，点击＆＃34;登录＆＃34;按钮我只需要调用accountService.openModal（）或accountService.hideModal（）。

我认为它应该可以工作，但问题是，当这样调用时，AccountComponent中的$（＆＃39; #myModal＆＃39;）会返回null。

所以我认为这可能是因为当你点击＆＃34;登录＆＃34;在NavigationComponent中的按钮，AccountComponent的htmls不存在/未初始化，因为您从未在此之前输入此页面或在登录前将其路由到该页面（因为您无法在登录后看到AccountComponent视图）？我理解正确还是其他原因？有没有解决方法？

我很可能对此非常不对，并且不能正确理解问题。刚开始学习打字稿和角度。有人可以帮忙吗？

Answer 1

您需要使用ngBootstrap。我已经解决了如下问题。这是我的模态

<div id="myModal" class="modal" role="dialog" [ngbCollapse]="showModal">
""
""
""
</div>

在你的ts文件中，你必须声明一个变量

showModal = true;

假设我想点击按钮

切换模态

<button type="button" class="btn btn-success" data-dismiss="modal" (click) = "toggleModal()">YES</button>

现在在你的ts文件中创建一个函数

toggleModal()
{
    this.showModal = !this.showModal;
}

在不同的组件，Angular 4 Typescript项目的代码中显示/隐藏模态，

1 个答案: