首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular 5中按下浏览器的后退按钮时,我的模式弹出窗口不会关闭

在Angular 5中,按下浏览器的后退按钮时,模态弹出窗口不会自动关闭的原因是浏览器的后退按钮会触发浏览器的历史记录变化,但不会触发Angular的路由导航事件。因此,需要手动监听浏览器的历史记录变化,并在变化时关闭模态弹出窗口。

以下是一种解决方案:

  1. 在弹出窗口的组件中,使用HostListener装饰器监听浏览器的popstate事件。popstate事件会在浏览器的历史记录发生变化时触发。
代码语言:txt
复制
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @HostListener('window:popstate', ['$event'])
  onPopState(event: any) {
    // 关闭模态弹出窗口的逻辑
    // 可以调用关闭模态弹出窗口的方法或发出关闭事件
  }
}
  1. 在打开模态弹出窗口的地方,使用window.history.pushState方法添加一个自定义的历史记录条目。这样,当按下浏览器的后退按钮时,会触发popstate事件。
代码语言:txt
复制
openModal() {
  // 打开模态弹出窗口的逻辑
  // 可以调用打开模态弹出窗口的方法或发出打开事件

  // 添加自定义历史记录条目
  window.history.pushState({ modalOpen: true }, '');
}

通过以上步骤,当按下浏览器的后退按钮时,popstate事件会被触发,然后可以在事件处理程序中关闭模态弹出窗口。

请注意,以上解决方案仅适用于在同一个路由下打开模态弹出窗口的情况。如果在不同的路由下打开模态弹出窗口,需要根据具体情况进行相应的处理。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。详情请参考腾讯云云服务器
  • 腾讯云云数据库MySQL:提供高性能、可扩展的云数据库服务,适用于各种规模的应用。详情请参考腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JSP 防止网页刷新重复提交数据

(当然,这是在你客户端启用了JavaScript功能条件。) 如果客户后退,怎么办?...防止网页后退--新开窗口 用window.open弹出表单页面,点提交后关闭该页;处理提交ASP页也是用弹出,设定表单target,点提交window.open("XXX.asp","_blank..."),然后用JS来提交表单,完成后window.close(); 简单说,就是提交表单时候弹出窗口关闭窗口。...后来,看到竟然有那么多的人想要禁用这个后退按钮也就释然(想要禁用只有后退按钮,不包括浏览器前进按钮)。因为默认情况,用户提交表单之后可以通过后退按钮返回表单页面(而不是使用“编辑”按钮!)...不过注意到,如果使用这种方法,虽然用户点击一后退按钮不会看到以前输入数据页面,但只要点击两次就可以,这可不是我们希望效果,因为很多时候,固执用户总是能够找到绕过预防措施办法。

11.5K20

AngularDart 4.0 高级-路由概述 顶

点击页面上链接,浏览器导航到新页面。 点击浏览器后退和前进按钮浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激,您都可以进行命令式导航。并且路由器浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...点击“返回”按钮,应用程序返回英雄列表,显示更改英雄名称。 注意名称更改立即生效。 如果您点击了浏览器后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。...与英雄细节不同,当您键入更新,危机细节更改是暂时,直到您通过“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您更改,或单击“Cancel”并继续编辑。 这种行为后面是路由routerCanDeactivate挂钩。

6.1K20
  • Selenium WebDriver脚本Java代码示例

    driver.close(); 终止整个程序 如果你没有先关闭所有浏览器窗口情况使用此命令,你整个Java程序将在浏览器窗口打开结束。...1、 close() 示例用法: 不需要参数 它只关闭WebDriver控制的当前浏览器窗口关闭单个浏览器窗口 2、quite() 示例用法: 不需要参数 使用quit()关闭与WebDriver对象所控制窗口关联所有窗口...关闭和退出浏览器窗口 切换内嵌框架Frame 要访问框架中GUI元素,我们应该首先引导WebDriver将焦点放在框架或弹出窗口上,然后才能访问其中元素。...注意: driver.get() : 它用于访问特定网站,但它不维护浏览器历史记录和cookie,所以我们不能使用前进和后退按钮;使用get()会跳转到一个新页面,当有需要前进或后退到需要页面获取元素...,无法再对历史页面来回跳转; driver.navigate() : 它用于访问特定网站,但是它维护浏览器历史记录和cookie,所以我们可以在编写Testcase过程中使用前进和后退按钮页面之间导航

    5.3K20

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    包含草稿推文和文本撰写推文屏幕截图:显式关闭示例图片显式关闭:如果不想发送这条推文,可以关闭按钮或 Escape 关闭看到对话框 使用 "light dismiss" 的话,一个组件会在以下条件出现时自动消失...键盘可关闭/可折叠 如果内容可以被关闭或折叠,用户也应该能够只用键盘关闭或折叠它。 当内容可以关闭,一种常见模式 Escape 键关闭内容。...通常,关闭只在用户专注于组件内部要受到限制,只有在用户专注于组件内部才能关闭。如果有许多要关闭东西,比如嵌套组件,则需要多次 Escape 键,以便从最内层到最外层元素逐步关闭组件。...当用户 Escape 键浏览器关闭模态对话框。非模态对话框没有此默认行为,开发人员可以需要添加它。...浏览器会自动为s 执行此操作。对于弹出窗口,它只“有意义地方”情况执行(请参阅弹出窗口解释器)。如果用户没有触发它,将它移动到 DOM 中较早适当位置。

    3.7K00

    Matplotlib 中文用户指南 7.1 交互式导航

    以下是工具栏底部每个按钮说明: Home(首页)、Forward(前进)和Back(后退按钮: 这些类似于 Web 浏览器前进和后退按钮。 它们用于之前定义视图之间来回浏览。...它们没有意义,除非你已经使用平移和缩放按钮访问了其他地方。 这类似于尝试访问新页面之前单击 Web 浏览器返回 - 什么都不会发生。 首页总是你第一个浏览页面,以及你数据默认视图。...单击工具栏按钮激活平移和缩放,然后将鼠标放在轴域某个地方。 按住鼠标左键并将其拖动到新位置来平移图形。 当你释放它,你点处数据将移动到你释放点。...+ w 将平移/缩放限制于x轴 使用鼠标平移/缩放按住x 将平移/缩放限制于y轴 使用鼠标平移/缩放按住y 保留宽高比 使用鼠标平移/缩放按住CONTROL 切换网格 鼠标轴域上g 切换...x轴刻度(对数/线性) 鼠标轴域上L或k 切换y轴刻度(对数/线性) 鼠标轴域上l 如果你使用matplotlib.pyplot,则会为每个图形自动创建工具栏。

    2.1K20

    WebDriverIO教程:处理Selenium中警报和覆盖

    在此有关Selenium中警报处理WebDriverIO教程中,将向您展示如何在WebDriverIO中处理警报和弹出窗口以及叠加模式。...在此,用户只有一个选项可以“确定”按钮。以下是警报弹出示例。 ? 确认提示 确认警报是带有消息第二种警报,它使用户可以选择“确定”或“取消”。这是确认警报示例。 ?...除了这些内置javascript警报之外,还有一个弹出窗口称为“模式”。警报和模式警报之间主要区别在于,如果没有请求操作(如“确定”或“取消”),警报将不会发出。...它可以帮助用户单击“警报”弹出窗口“确定”按钮。...警报只能通过预期操作关闭,而覆盖模式可以通过单击背景上任意位置来关闭。现在,将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态,您不必处理特殊代码或类。

    6.2K10

    WebDriverIO教程:处理Selenium中警报和覆盖

    在此有关Selenium中警报处理WebDriverIO教程中,将向您展示如何在WebDriverIO中处理警报和弹出窗口以及叠加模式。...在此,用户只有一个选项可以“确定”按钮。以下是警报弹出示例。 确认提示 确认警报是带有消息第二种警报,它使用户可以选择“确定”或“取消”。这是确认警报示例。...除了这些内置javascript警报之外,还有一个弹出窗口称为“模式”。警报和模式警报之间主要区别在于,如果没有请求操作(如“确定”或“取消”),警报将不会发出。...它可以帮助用户单击“警报”弹出窗口“确定”按钮。...警报只能通过预期操作关闭,而覆盖模式可以通过单击背景上任意位置来关闭。现在,将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态,您不必处理特殊代码或类。

    5.9K30

    BOM介绍_BOM定义

    我们浏览器一些操作都可以使用BOM方式进行编程处理, 比如:刷新浏览器后退、前进、浏览器中输入URL等。...BOM顶级对象window window是浏览器顶级对象,当调用window属性和方法,可以省略window 注意:window下一个特殊属性 window.name Global对象:全局变量...,当前窗口关闭,子窗口没有关闭。...编程练习 实现:当点击页面上按钮弹出确认框 (1)当点击按钮上的确定时,打开设置了新特征窗口, 新窗口特征参考任务栏中描述 (2)当点击按钮取消关闭当前页面 思路 第一步:获取到按钮元素...,并为按钮绑定鼠标单击事件 下面的步骤皆单击事件中进行 第二步:当点击按钮弹出确认框,用if判断对确认框返回值进行判断 (1)返回值为true,说明点击是确认,打开新窗口“newPage.html

    1.2K20

    JavaScript 高级程序设计(第 4 版)- BOM

    window 对象浏览器中有两重身份,一个是 ECMAScript 中 Global 对象,另一个就是浏览器窗口 JavaScript 接口。...弹出窗口 window.open()第二个参数不是已有窗口,则会打开一个新窗口或标签页 第三个参数即特性字符串,用于指定新窗口配置 如果不指定这会带所有默认浏览器特性 如果打开不是新窗口,...则忽略第三个参数 window.open()返回一个对新建窗口引用,可以以此控制新窗口 可以用close()关闭新打开窗口 新建窗口window对象有一个属性opener,指向打开它窗口 窗口不会跟踪记录自己打开窗口...没有效果,还可能向用户显示错误 弹窗通常可能在鼠标点击或下键盘中某个键情况才能打开 弹窗屏蔽程序 所有现代浏览器都内置了屏蔽弹窗程序,因此大多数意料之外弹窗都会被屏蔽 // 如果浏览器内置弹窗屏蔽程序阻止了弹框...对象 点击“后退按钮直到返回最初页面, event.state 会为 null 可以通过 history.state 获取当前状态对象,也可以使用replaceState()并传入与pushState

    1.2K10

    Windows 11 上关闭弹出窗口最正确方法

    您工作或尝试专注于某段内容弹出窗口和中断可能会很烦人。 虽然移动设备只有一个 DND 切换开关,但Windows呢?您可以 Windows 11 上停止弹出窗口吗?... Windows 11 上停止弹出窗口 8 种方法(分步教程) 要停止 Windows 11 上弹出窗口,您可以选择关闭通知、启用焦点模式或禁用警报。这些方法中每一种都有其优点和缺点。...向下滚动到底部并取消选中“提供有关如何设置设备建议”和“使用 Windows 获取提示和建议”框。...现在,关闭“让应用程序使用广告 ID 向我展示个性化广告”。 方法 4:禁用浏览器弹出窗口 自互联网早期以来,弹出窗口一直是浏览器一个突出烦恼。...左侧面板中,单击“Cookie 和站点权限”。 然后向下滚动并找到“弹出窗口和重定向”并单击它。 打开“阻止(推荐)”切换开关。 您将不会再收到任何烦人弹出窗口

    46310

    前端猿要了解基本浏览器(BOM)知识

    保存是最外层 window 对象可见页面的边距,这就导致即使浏览器紧贴屏幕,那么返回距顶部距离不会是零而是工具栏高度,因为浏览器工具栏不算可见页面。...否则就创建一个新窗口并命名指定名字 参数3:规定新打开窗口属性,比如宽高、位置、是否可以拖动浏览器等等,具体参数用时请查表 注意, 参数都为空情况,默认打开空白页; 只有参数1或者参数1和参数...,浏览器窗口是无法用代码关闭,必须由人自己关闭 var w = window.open("https://www.baidu.com/","Baidu","width=300,height=200...安全限制 由于打开新网页是如此简单,所以不免有人设置程序,短时间内自动打开许多广告页面,所以许多浏览器都做了限制 比如 IE 不允许弹出窗口随意拖动至浏览器外,不允许关闭状态栏 比如 Firefox...会强制弹出窗口中显示地址栏 另外浏览器甚至规定,一个页面尚未加载完成,不允许执行 window.open() 语句,只能通过单击某个浏览器提供按钮或者敲键盘打开 当然也可以为自己浏览器安装弹窗屏蔽插件

    87410

    深入JavaScript之BOM、DOM和事件

    文章目录 BOM 概念 对象组成 Window:窗口对象 方法 与弹出框有关方法 与打开关闭有关方法 与定时器有关方式 属性 获取其他BOM对象 获取DOM对象 特点 Location:地址栏对象...对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象 Window:窗口对象 方法 与弹出框有关方法...返回值:获取用户输入值 与打开关闭有关方法 close() 关闭浏览器窗口。...谁调用关谁 open() 打开一个新浏览器窗口 返回新Window对象 与定时器有关方式 setTimeout() 指定毫秒数后调用函数或计算表达式。...键盘事件 onkeydown 某个键盘按键被。 onkeyup 某个键盘按键被松开。 onkeypress 某个键盘按键被并松开。 选择和改变 onchange 域内容被改变。

    2.9K30

    JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

    close 关闭浏览器窗口 open 打开一个新浏览器窗口,加载给定URL所指定文档 setTimeout 设定毫秒数后调用函数或计算表达式 setInterval 按照设定周期(以毫秒计)...window对象 open() 方法和 close() 方法用于打开和关闭窗口 open方法第一个参数是新窗口URL,第二个参数是给新窗口命名,第三个参数是设置新窗口特征 名称 说明 height...、width 窗口文档显示区高度、宽度,单位为像素 left、top 窗口与屏幕左边、顶端距离,单位为像素 示例:制作一个从天而降广告页面,打开主页面,广告页面也随之打开   <...,使用 history对象可以将当前浏览器页面跳转到某个曾经打开过页面 方法 描述 back() 后退一个页面,相当于浏览器后退按钮 forward() 前进一个页面,相对于浏览器前进按钮 go()...alert() 方法:显示带有一个提示消息和一个“确定”按钮警示框 confirm() 方法:显示一个带有提示信息、“确定”和“取消”按钮的确认框 open() 方法:打开一个新浏览器窗口

    79010

    JavaScript 入门(

    window对象主要用来控制由窗口弹出对话框、打开窗口关闭窗口、控制窗口大小和位置等等。一句话,window对象就是用来操作“浏览器窗口一个对象。...绿叶学习网JavaScript在线测试工具中,当点击“调试代码”按钮,就会打开一个新窗口,并把HTML文档输出到新页面中去。...当我们点击“关闭窗口按钮后,被打开“子窗口”就会被关闭。...四、窗口历史 平常在使用浏览器当中,我们都会经常使用浏览器“前进”和“后退”。其实浏览器都会帮我们保存浏览历史(即窗口历史)。那么JavaScript中,我们该如何来操作这些窗口历史呢?...JavaScript中,事件往往是页面的一些动作引起,例如当用户鼠标或者提交表单,甚至页面移动鼠标,事件都会出现。

    1.1K20

    国产linux操作系统深度系统20.3发布(推荐)

    系统更新日志: 新增及优化 DDE 新增全局搜索功能快捷键,支持搜索markdown文件 优化任务栏声音调整最小刻度值 优化多屏模式选择为扩展模式,在任务栏鼠标右键后菜单显示多屏显示设置 优化控制中心时间...,桌面和文管行为不一致问题 修复部分机型选择文件后点击顶部栏唤起右边栏功能,出现崩溃问题 修复右键压缩文件,弹出两个压缩操作窗口问题 应用商店 修复暂停下载任务概率出现崩溃问题 修复弹出二次确认删除框内...,任务栏图标右键所有窗口未翻译问题 修复快速点击地址栏前进、后退按钮出现崩溃问题 修复从设备上传超过10M大小jpeg格式图片,键盘ESC键无法退出弹框并且焦点在自定义标签页上问题 修复长按自定义标签页快捷图标...,无法调起右键菜单问题 修复深色主题模式浏览器窗口化状态显示浅色滚动条问题 修复设置自定义背景后做重置操作,已打开标签页背景不会恢复到默认问题 修复已打开标签页自定义背景选项无法自动同步问题...修复安卓应用游戏《指尖点点消》部分显卡大概率出现崩溃问题 计算器 修复输入框和历史框有内容清除输入框后输入符号,清除按钮显示错误问题 修复非标准模式触控屏输入区域右键,菜单选择”剪切””删除

    5.8K20

    AngularDart Material Design 弹出框 顶

    这意味着可以OnPush模式下在另一个组件中使用此组件,但由于任何此类实现都需要所有内容子项支持OnPush,因此由实现者自行决定。...onSomethingThatShouldCloseTheDropdown() { _dropdownHandle.close(); } } Inputs: autoDismiss bool   设置弹出窗口是否应在文档关闭...hasBox bool 弹出式面板是否具有包装内容封闭框。 这为面板提供了阴影和背景颜色。当它关闭不会应用延迟动画。...与Angular提供程序类似,它支持首选位置嵌套列表。 弹出窗口将展平位置列表并选择第一个适合屏幕位置。 slide String  弹出缩放方向。...close Stream  关闭弹出窗口触发异步事件。 open Stream  在打开弹出窗口触发异步事件。

    2.4K30

    Source Insight 4.0初用(上)

    导入文件一些选项 ?...关闭项目:Alt+Shift+W 打开项目:Alt+Shift+P,项目列表里选中项目进行打开 删除项目:菜单栏-项目-删除项目 ---- 快捷键Alt+Shift+S可以同步文件,同步文件后就可以自动找到源代码之间依赖关系了...菜单栏-选项-参数-语言标签,选中解析文档语言,点击关键字按钮,打开语言关键字窗口样式这一栏选中一种风格,然后添加关键字即可。这样文档中这个关键字就以那种风格显示了。...(3)、快速更名ctrl+',选中某个函数名,然后ctrl+',弹出快速更名窗口,然后根据相应选项,可以快速更换函数名。(包括函数声明处,定义处,引用处等)。...可以尝试一勾上效果,然后和不勾效果对比一。 ?

    1.3K41
    领券