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

单击浏览器的后退按钮时,Angular2 material对话框越来越近,我们可以避免这种情况吗?

当单击浏览器的后退按钮时,Angular2 Material对话框会逐渐靠近的情况是由于浏览器的历史记录导致的。在Angular中,可以通过以下几种方式来避免这种情况:

  1. 使用Angular Router的导航守卫:可以在路由导航过程中检查是否存在打开的对话框,并在导航开始时关闭对话框。可以使用CanDeactivate守卫来实现这一点。
  2. 监听浏览器的popstate事件:可以在浏览器的后退按钮被点击时触发相应的事件处理函数,在该函数中关闭对话框。
  3. 使用Angular Material的MatDialog服务:可以通过订阅对话框的关闭事件,在对话框关闭时执行相应的操作,例如在关闭对话框时导航到其他页面。

需要注意的是,以上方法只是避免对话框靠近的一种方式,具体的实现方式可能因项目的具体需求而有所不同。此外,还可以根据具体情况考虑使用其他的前端技术或框架来实现对话框的管理和控制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter Widgets 之 Dialog 对话框

,比如删除文件,一般会弹出提示“是否要删除当前文件”,用户点击确认后才会进行删除操作,这时我们可以使用提示框(AlertDialog或者CupertinoAlertDialog)。...根据设计不同,我们可以选择Material风格AlertDialog或者Cupertino(ios)风格CupertinoAlertDialog, Material风格基础用法如下: RaisedButton...用户点击“取消”或者“确定”按钮后退对话框,App需要知道知道用户选择了哪个选项,用法如下: RaisedButton( child: Text('切换'), onPressed: () async...如果你觉得这还是不够个性,那可以祭出终极大招了,直接使用Dialog,Dialog可以定制任何对话框,只需将对话框内容给child属性: Dialog( child: MyDialog(), );...当然一般情况下,系统提供对话框就够用了,这几个对话框组件用法基本一样,不同地方仅仅是灵活性和使用简易程度不要,Dialog最灵活,但使用起来比AlertDialog复杂一些,AlertDialog

1K10

Material Design — 提示框( Dialogs)

关闭提示框 提示框可以通过点击提示框外部或点击系统后退按钮(在Android上)来关闭。 有时候,用户必须做出选择动作后才能关闭提示框。...如果需要标题: ·在内容区域使用明确问题或陈述,例如“擦除USB存储器?” ·避免道歉,模棱两可或提问,例如“警告!”或“你确定?” ?...例如,用户可以聆听多个铃声,但只能在触摸“ok”进行最终选择。 点击确认对话框“取消”,或按Android后退”,取消操作,放弃所有更改并关闭对话框。 ?...全屏对话框可实现复杂布局,将多个材料堆积情况简化(提示框上层提示框),并暂时将app可感知海拔重置为更高。 全屏对话框允许任务在复杂操作开启简单菜单或简单提示框。...确认按钮将被禁用,直到满足对话框所有必填字段都完成,确认操作才会被激活 丢弃(离开) 丢弃操作(屏幕左上角“X”)和后退按钮均会关闭全屏对话框并放弃之前所做更改。

5.1K101
  • Flutter Widgets 对话框-Dialog

    ,比如删除文件,一般会弹出提示“是否要删除当前文件”,用户点击确认后才会进行删除操作,这时我们可以使用提示框(AlertDialog或者CupertinoAlertDialog)。...根据设计不同,我们可以选择Material风格AlertDialog或者Cupertino(ios)风格CupertinoAlertDialog, Material风格基础用法如下: RaisedButton...属性相对比较丰富,可以设置title样式、content样式、背景颜色、阴影值,设置是形状: AlertDialog( title: Text('提示'), content: Text('确认删除...shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70] 用户点击“取消”或者“确定”按钮后退对话框...,直接使用Dialog,Dialog可以定制任何对话框,只需将对话框内容给child属性: Dialog( child: MyDialog(), ); 当然一般情况下,系统提供对话框就够用了,这几个对话框组件用法基本一样

    1.4K11

    JavaScript(九)

    如果用户单击了 OK 按钮,则 prompt() 返回文本输入域值,如果用户单击了 Cancel 或没有单击 OK 而是通过其他方式关闭了对话框,则该方法返回 null 这些系统对话框很适合向用户显示消息并请用户作出决定...当通过上述任何一种方式修改 URL 之后,浏览器历史记录中就会生成一条新记录,因此用户通过单击后退按钮都会导航到前一个页面。 要禁用这种行为,可以使用 replace() 方法。...出于安全方面的考虑,开发人员无法得知用户浏览过 URL。不过,借由用户访问过页面列表,同样可以在不知道实际 URL 情况下实现后退和前进。...负数表示向后跳转(类似于单击浏览器后退按钮),正数表示向前跳转(类似于单击浏览器”前进”按钮)。...顾名思义,这两个方法可以模仿浏览器后退”和”前进”按钮。 除了上述几个方法外,history 对象还有一个 length 属性,保存着历史记录数量。

    1.1K40

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

    ,以及文本框默认值 如果用户单击了 OK 按钮,则 prompt()会返回文本框中值。...如果用户单击了 Cancel 按钮,或者对话框被关闭,则 prompt()会返回 null find()和print(): 这两种对话框都是异步显示,即控制权会立即返回给脚本 显示查找对话框或打印对话框...,除了hash外,设置location一个属性就会导致页面重新加载新URL 如果不希望增加历史记录,可以使用replace()方法,重定向后后退按钮是禁用状态 reload() 能重新加载的当前显示页面...此时单击后退按钮,就会触发 window 对象上 popstate 事件 popstate 事件事件对象有一个 state 属性,其中包含通过 pushState()第一个参数传入 state...对象 点击“后退按钮直到返回最初页面, event.state 会为 null 可以通过 history.state 获取当前状态对象,也可以使用replaceState()并传入与pushState

    1.2K10

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

    有时 popover 可以是 (无模式) 对话框,在这种情况下,可以使用 。...按钮可以设置为只显示或只隐藏,在这种情况下,使用 show 或 hide 操作 popovertargetaction。...据我今天理解,它可以我们自动将弹出框放置在最合适位置,避免与窗口边缘发生碰撞。有点像今天库,但内置于浏览器中。 为了定位弹出框,有一个非常令人兴奋提议叫做CSS 锚点定位。...据我理解,它将允许我们自动定位在最合适位置,避免与窗口边缘发生碰撞。有点像 Popper 库今天所做,一旦提议实现那么将可以浏览器中直接使用。...当用户打开它,这是他们唯一想要看到东西?这是一个棘手问题,我感觉模态对话框可以工作,非模态对话框可以工作。

    3.8K00

    AngularDart 4.0 高级-路由概述 顶

    点击页面上链接,浏览器导航到新页面。 点击浏览器后退和前进按钮浏览器会前后浏览您浏览过网页历史记录。 Angular路由器借鉴了这种模式。...它可以浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面上链接,并在用户单击链接导航到适当应用程序视图。...当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激,您都可以进行命令式导航。并且路由器在浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...与英雄细节不同,当您键入更新,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。...点击浏览器后退按钮或“英雄”链接。 向上弹出一个对话框。 ? 您可以选择“OK”并丢失您更改,或单击“Cancel”并继续编辑。 这种行为后面是路由routerCanDeactivate挂钩。

    6.1K20

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

    以下是工具栏底部每个按钮说明: Home(首页)、Forward(前进)和Back(后退按钮: 这些类似于 Web 浏览器前进和后退按钮。 它们用于在之前定义视图之间来回浏览。...它们没有意义,除非你已经使用平移和缩放按钮访问了其他地方。 这类似于尝试在访问新页面之前单击 Web 浏览器返回 - 什么都不会发生。 首页总是你第一个浏览页面,以及你数据默认视图。...单击工具栏按钮激活平移和缩放,然后将鼠标放在轴域某个地方。 按住鼠标左键并将其拖动到新位置来平移图形。 当你释放它,你按下点处数据将移动到你释放点。...可以使用鼠标左键拖动半径轴标签。 可以使用鼠标右键放大和缩小半径刻度。 Zoom-to-rectangle(缩放到矩形)按钮 单击此工具栏按钮以激活此模式。 将鼠标放在轴域某处,然后按鼠标左键。...Subplot-configuration(子图配置)按钮 使用此工具配置子图参数:左边距,右边距,上边距,下边距,行间隔和列间隔。 Save(保存)按钮 单击按钮可启动文件保存对话框

    2.1K20

    Flutter中如何使用WillPopScope

    以下几种情况我们会用到WillPopScope: 需要询问用户是否退出。...询问用户是否退出 在Android App中最开始页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户误操作。...在Android App中最开始页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户误操作。...不过在一些情况下,我们希望有自己定义Navigator,比如如下场景: 在页面底部有一个常驻bar,其上展示内容,这个常驻bar就需要一个自己Navigator。...在使用TabView、BottomNavigationBar、CupertinoTabView这些组件,希望有多个Tab,但每个Tab中有自己导航行为,这时需要给每一个Tab加一个Navigator

    1.5K20

    excel常用操作大全

    在EXCEL菜单中,单击文件-页面设置-工作表-打印标题;您可以通过按下折叠对话框按钮并用鼠标划定范围,将标题设置在顶端或左端。这样,Excel会自动将您指定部分添加为每页页眉。...一般来说,我们习惯在表单上使用斜线,但是工作表本身不提供这个功能。事实上,我们可以使用绘图工具来实现: 点击“绘图”按钮,选择“直线”,鼠标将变成一个十字。...此时,您可以这样做:首先,选择要保护单元格区域,在“格式”菜单中选择“单元格”命令,选择“保护”,从对话框中选择“锁定”,然后单击“确定”退出。...28、命名工作表应注意问题 有时,为了直观起见,经常需要重命名工作表(Excel中默认表名是sheet1、sheet2.)。重命名,最好不要使用现有的函数名作为表名,否则在以下情况下会有歧义。...当我们在工作表中输入数据我们有时会在向下滚动记住每个列标题相对位置,尤其是当标题行消失时。此时,您可以将窗口分成几个部分,然后将标题部分保留在屏幕上,只滚动数据部分。

    19.2K10

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    修改现有的控件 标记每当您在VS Code中打开HTML文件,都会激活WijmoJS VSCode Designer。 让我们首先打开一个WijmoJS示例HeaderFilters。...要返回FlexGrid表格控件设置,请单击“属性”窗格中后退按钮。 如果对设计器中所做更改感到满意,请单击WijmoJS 徽标下方“保存”按钮以更新原始源文件编辑器并将其重点关注。...单击axisY属性齿轮图标,然后将format属性设置为字符串c0,表示零小数位货币值。 单击“属性”窗格中后退按钮以返回FlexChart设置。...接下来,单击图例属性齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。 通过将其标题属性设置为Most Active,为图表添加标题。...在这种情况下,设计器以斜体显示只读文本框中绑定。 保存操作期间保留绑定事件; 但是,在设计器中没有用于创建或编辑它们界面。

    5.4K40

    Win Server 2003 10条小技巧

    单击“操作”菜单上“新用户”,然后在弹出“新用户”对话框中键入您准备使用用户名、密码,然后清除“用户下次登录须更改密码”复选框选中状态(如图3),再单击“创建”按钮,然后单击“关闭”按钮关闭对话框...创建新用户账户后,我们还需要赋予其管理员权限,以后用起来才比较方便。双击新创建用户账户名称,在弹出“用户属性”对话框单击“隶属”选项卡,单击下方“添加”按钮。...设置项,用鼠标右键单击该项,选择“属性”(如图5),在“显示关闭跟踪程序属性”对话框中选择“已禁止”,然后单击“确认”按钮,即可避免关闭电脑麻烦。 ...在弹出对话框中列出Windows组件中清除“Internet Explorer 增强安全配置”选中状态,然后单击完成,就可以在重启动Internet Explorer浏览器后使增强安全设置失效。...如果您想保留增强安全设置功能,而又希望尽量减少它带来不便,那么可以在打开浏览器弹出“系统已启动增强安全设置”警告对话框,选中左下角“以后不显示这个信息”对话框避免每次转到新网页都收到一次警告

    2.4K20

    AJAX常见面试问题

    3.有没有遇到过这种情况 在ie浏览器中 后台图片数据已经改变 但是客户端没有发生改变 该怎么处理?...一个被完整读入页面与一个已经被动态修改过页面之间差别非常微妙;用户通常会希望单击后退按钮能够取消他们前一次操作,但是在Ajax应用程序中,这将无法实现。...答案是肯定,用过Gmail知道,Gmail下面采用Ajax技术解决了这个问题,在Gmail下面是可以后退,但是,它也并不能改变Ajax机制,它只是采用一个比较笨但是有效办法,即用户单击后退按钮访问历史记录...(例如,当用户在Google Maps中单击后退,它在一个隐藏IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时状态。)...一些手持设备(如手机、PDA等)现在还不能很好支持Ajax,比如说我们在手机浏览器上打开采用Ajax技术网站,它目前是不支持。 .客户端过肥,太多客户端代码造成开发上成本。

    1.8K20

    大漠穷秋:全面解读Angular 4.0核心特性

    摘要 基于最新Angular4.0版本,超级大咖大漠穷秋为我们讲解强大集成开发平台Angular/cli,以及Angular最核心3大概念:组件、模块、路由。...Router 如果没有router,浏览器前进后退按钮就不能用,也无法把URL拷贝并分享给你朋友。...做异步路由要注意是,写是loadchildren,加载对象是module而不是component。由此可见,NgModule是用来配合Angular/cli做模块打包和加载。...例如ng2-bootstrap、PrimeNG和官方提供Angular-Material2,在移动端也有Ionic支持。...前端用户Angular做它前端框架,它实现了Angular1和Angular2两个版本,选择范围比较广。可以利用它快速搭建应用框架。 今天分享到此结束,谢谢大家!

    2.1K50

    PS模块第十节:PA PLM220详细练习

    通过单击 Enter 图标来确认您条目。 c) 可能会出现一个对话框,您可以选择采购类型。在对话框中,选择“网络购买申请”,并通过单击“继续”图标确认您条目。 d) 显示组件详细信息屏幕。...所有新组件分配现在都显示在结果概述中。单击保存图标,并在必要确认任何调度警告。通过单击后退”图 标来退出 BOM 传输。...使用“后退按钮退出事务处理。...输入 0001 作为材料存储位置,并 在必要为每个项目设置 OK 指示符。单击“Post”图标,然后通过单击后退”图标退出事务。 7.订单报工 一旦生产订单部件发货,就可以处理订单。...版权归原作者所有,如有侵权请联系删除 ---- 免责声明:本文所用视频、图片、文字如涉及作品版权问题,请第一间告知,我们将根据您提供证明材料确认版权并按国家标准支付稿酬或立即删除内容!

    3.8K22

    VBA实战技巧32:安装Excel加载宏

    我们知道,有多种方法可以进入“Excel加载宏”对话框。最简单就是,单击功能区“开发工具”选项卡“加载项”组中“Excel加载项”,即可打开如下图1所示“加载宏”对话框。...图1 复杂一点方法就是,单击Excel左上角“文件——选项”,在“Excel选项”对话框中,单击左侧“加载项”选项卡,在右侧下方“管理”下拉列表中选择“Excel加载项”,单击其右侧“转到”按钮...这两种方法操作演示如下图2所示。 图2 如果你加载宏不在“可用加载宏”列表中,则必须单击对话框右侧“浏览”按钮,进行查找,然后将其添加到可用加载宏列表中。...2.注册表 对于与上述位置不同加载项,Excel将在注册表中查找。当单击“浏览”按钮以查找加载项,会在此处添加键。...在这种情况下,使用Application.Ontime启动所需过程。

    4.9K20

    BubbleRob tutorial 遇到问题

    考虑模型角色:能够将它附加到其他对象上?(例如,你模型是一个可以连接到机械臂手腕夹具)。或者你能给它加上别的模型?(例如,您模型是一个可以接受夹持器模型机械手)。...模型文件(“*.ttm”-文件)也支持资源管理器窗口和应用程序窗口之间拖放操作。模型文件也可以双击,在这种情况下,它们将启动V-REP应用程序并加载到一个默认场景中。...你也可以双击场景层次结构中对象图标来打开对话框,或者单击工具栏按钮: ? 在“场景对象属性”对话框中,单击“公共”按钮以显示“对象公共属性”对话框对话框显示最后选择对象设置和参数。...在这种情况下,可以使用collection self-collision indicator:同一collection中两个item,如果它们indicator difference正好为1,则不进行核对...矩阵将被应用:如果勾选此项,那么对象在装配将不会呆在原地:一个特定变换矩阵将被用作其新局部变换矩阵。默认情况下,这个矩阵是单位矩阵,但是您可以通过单击Set matrix指定一个特定矩阵。

    1.7K10

    如何制作自己原生 JavaScript 路由

    每当在浏览器地址栏中输入新 URL,但我们不想刷新页面,就会发生这种情况我们只是想通过加载新内容来刷新视图。 你可以选择将路由存储在 routes[] 数组中。...太糟糕了,因为单击浏览器后退”和“前进”按钮与浏览历史记录中 URL 导航有关。如果没有 History API,就无法谈论路由。...history.back() 与 history.go(-1) 相同,或者当用户在浏览器单击 Back 按钮。你可以用任何一种方法达到相同效果。...这就是使浏览器无需重新加载页面即可更改 URL 原因。 结果:现在,每次我们单击按钮,URL 实际上都会在浏览器地址栏中更改。内容框也会更新。 ? 我们原生 JS 路由开始运行了。...这是你必须再次更新视图部分。(第一次是我们单击按钮。) 但是由于该事件带有单击 id,因此单击 Back 或 Forward 很容易刷新视图并重新加载内容。

    3.9K20

    Flutter中如何使用WillPopScope示例代码

    以下几种情况我们会用到WillPopScope: 需要询问用户是否退出。...询问用户是否退出 在Android App中最开始页面点击后退按钮,默认会关闭当前activity并回到桌面,我们希望此时弹出对话框或者给出提示“再次点击退出”,避免用户误操作。...我们可以把效果做成快速点击2次退出: DateTime _lastQuitTime; WillPopScope( onWillPop: () async { if (_lastQuitTime...App中有多个Navigator 我们App通常是在MaterialApp和CupertinoApp下,MaterialApp和CupertinoApp本身有一个Navigator,所以默认情况下调用...不过在一些情况下,我们希望有自己定义Navigator,比如如下场景: 在页面底部有一个常驻bar,其上展示内容,这个常驻bar就需要一个自己Navigator。

    2.9K40
    领券