简体   繁体   English

如何使用 angular8 和 bootstrap4 检测保存和标签更改事件

[英]How to detect save and tab change event using angular8 with bootstrap4

i have used bootstrap4 tabs in angular8.我在 angular8 中使用了 bootstrap4 选项卡。 Now if i have not filled details in first tab, (ie) user tab and click on submit, then the other tab must be disabled, once the submit button is click then the other tab must be enabled.现在,如果我没有在第一个选项卡中填写详细信息,(即) user选项卡并单击提交,则必须禁用other选项卡,一旦单击提交按钮,则必须启用另一个选项卡。 Here based on click of other tab, the contents in the other tab must be loaded, if other tab is not clicked, then the details in others tab must not be filled.在此基础上其它标签的点击,在内容的other标签必须加载,如果other标签不点击,则在细节上others标签不能被填补。 I have tried by using click event and tabChange event, but everything works in app.component but the data doesnt come to the user or other tab based on click on other tab.我已经尝试过使用 click 事件和 tabChange 事件,但一切都在 app.component 中工作,但数据不会基于点击其他选项卡到达用户或其他选项卡。

I am not getting anyway to move forward, i have even used event emitters and storage inside the app, through service files, but nothing worked for me.我无论如何都没有继续前进,我什至通过服务文件在应用程序内使用了事件发射器和存储,但没有任何效果对我有用。

Demo 演示

I looked at your Demo and I think I understand your problem.我看了你的演示,我想我明白你的问题。 I personally am a fan of using ReplaySubjects, and EventEmitters to pass data up and down through my components.我个人很喜欢使用 ReplaySubjects 和 EventEmitters 在我的组件中上下传递数据。 Here is a working demo :这是一个工作演示:
Working Demo工作演示
Let me know if it is not what you were looking for.如果这不是您要找的,请告诉我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 Angular8 检测输入的变化 - How to detect change in input using Angular8 使用angular8单击选项卡时如何使选项卡聚焦在第一个字段上 - How to get the tab focus on the first field when the tab is clicked using angular8 Angular 中的 Bootstrap4 模态 - Bootstrap4 Modal in Angular 如何在 angular 6+ 中检测浏览器关闭事件或选项卡关闭事件? - How to detect browser close event or tab close event in angular 6+? 在角度引导选项卡中,如何取消选项卡更改? - In angular bootstrap tabs, how to cancel tab change? 如何使用 bootstrap4 修复映像 alignment? - How to fix image alignment using bootstrap4? React js-使用Bootstrap4 CDN,如何在react中手动启用javascript事件处理程序? - React js - Using Bootstrap4 CDN, How to manually enable javascript event handlers in react? 如果没有使用 Angular8 在输入字段中进行编辑,如何禁用保存按钮 - How to disable Save button, if there is no edit made in input field using Angular8 bootstrap4输入文件上传不会在输入中显示上传的文件名? 如何解决使用角度 - bootstrap4 input file upload won't show uploaded file name in input ?? how to solve using angular 如何在 angular8 注销时关闭在新选项卡中打开的路由器 - How to close the router opened in new tab on logout in angular8
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM