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

确认用户在编辑Angular 2时更改路线而不保存详细信息

在编辑Angular 2时,如果用户更改了路由但未保存详细信息,可以采取以下步骤:

  1. 提示用户保存:在用户尝试关闭页面或导航离开当前编辑页面时,可以弹出一个确认对话框,提醒用户是否保存更改。这可以通过监听路由变化事件来实现。
  2. 自动保存草稿:为了防止用户意外关闭页面或导航离开时丢失更改,可以实现自动保存草稿的功能。可以在用户每次更改路由时,自动将更改的内容保存到本地存储或服务器端。
  3. 撤销更改:为了提供更好的用户体验,可以实现撤销更改的功能。当用户更改路由后,可以提供一个撤销按钮,使用户可以撤销最近的更改并恢复到之前的状态。
  4. 数据验证:在用户更改路由时,可以对详细信息进行验证,确保输入的数据符合要求。可以使用Angular 2的表单验证机制来实现。
  5. 应用场景:这种情况适用于需要编辑和保存路由信息的应用程序,例如网站管理后台、博客编辑器等。

推荐的腾讯云相关产品和产品介绍链接地址:

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行评估和决策。

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

RouterLink指令还有助于视觉上区分当前所选活动路线的锚点。当关联的路由链接变为活动状态时,路由将router-link-active CSS类添加到元素。...选择一个英雄,该应用会将您带到英雄编辑屏幕。 ? 改名字。 点击“返回”按钮,应用程序返回英雄列表,显示更改的英雄名称。 注意名称更改立即生效。...选择危机,应用程序会将您带入危机编辑屏幕。 危机详情显示列表下方的同一页面上的子视图中。 改变危机的名称。 请注意危机列表中的相应名称不会更改。 ?...与英雄细节不同,当您键入更新时,危机细节更改是暂时的,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。...您可以选择“OK”并丢失您的更改,或单击“Cancel”并继续编辑。 这种行为的后面是路由的routerCanDeactivate挂钩。

6.1K20

AngularDart4.0 英雄之旅-教程-07路由 顶

开始阶段 继续英雄之旅之前,请确认您具有以下结构。 ? 如果该应用程序尚未运行,请启动该应用程序。 进行更改时,请通过重新加载浏览器窗口来保持运行。...添加路由 应该在用户点击按钮后显示英雄不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...选择一个仪表板英雄 当用户选择仪表板中的英雄时,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。...仪表板英雄的行为应该像锚标签:当悬停在英雄的名字,目标网址应该显示浏览器的状态栏,用户应该能够复制链接或在新标签打开英雄详细信息视图。...用户可以应用程序周围进行导航,从仪表板到英雄详细信息,然后返回,从英雄列表到英雄详细信息,再次回到英雄。 你已经达到推动这个页面的所有导航要求。 风格化应用程序 该应用程序是功能,但它需要样式。

17.6K30
  • Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

    manualChangeDetection 函数可以用来禁用单元测试中的自动更改检测,使开发人员可以更精细地控制更改检测。...只需运行以下命令: ng serve --hmr 本地服务器启动后,控制台将显示一条消息,确认 HMR 处于活跃 5 状态: NOTICE: Hot Module Replacement (HMR) is...将来,webpack v5 会带来: 持久磁盘缓存,以加快构建速度 cjs 摇树,减小包体积 这一支持是实验性的,并且正在开发中,因此我们建议你将其用于生产用途。 想试用 webpack5 吗?...路线图 我们还更新了路线图,帮助大家了解我们当前的优先事项。这篇文章中的一些公告是路线图中正在进行的项目更新。...查找有关更新的详细信息和指南。

    3.3K30

    AngularDart4.0 英雄之旅-教程-05多组件 顶

    从哪里开始 开始使用本页面之前,请确认您之前“Tour of Heroes”中拥有以下结构。 如果没有,请返回前面的页面。 ?...HeroDetailComponent有一个英雄,不是一个选定的英雄。 模板中的任何地方用单词“hero”替换“selectedHero”。...就像您为内建的Angular指令所做的那样,通过将其列元数据指令列表中,告诉Angular关于英雄详细信息组件。...应用程序设计更改 和以前一样,每当用户点击一个英雄名字时,英雄详情就会出现在英雄列表的下方。 但是现在HeroDetailComponent正在呈现这些细节。...您可以将HeroDetailComponent演变成一个丰富的英雄编辑器,而无需触摸父AppComponent。 你可以触及英雄详情视图的情况下演化AppComponent。

    1.8K10

    外行假装内行,我也来谈谈SAP BAPI和BADI

    6.BAPISAP系统内部以Function Module的方式实现.所有的BAPI Function都支持Remote Function Call (RFC),处理过程中激活对话窗口。...中创建的结构必须保存在开发类中,不可保存为本地对象。...用户可以按需求单独更新某一个模块,没有必要为了增强某一个功能对系统进行全面升级。用户用逐个模块更新的办法增强系统的功能,不必更换整个系统。 BAPI技术对ERP软件的开发商来说是非常重大的进步。...BAPI是SAP业务对象的一个方法,底层多以Function Module来实现。所以ABAP里更多地是作为FM来使用。...生产订单确认 BAPI_PRODORDCONF_GETDETAIL 生产订单确认详细信息 BAPI_PRODORDCONF_GET_HDR_PROP

    1.3K30

    测试面试题集-Linux常用命令

    #返回上层目录 cd /tmp #进入指定目录/tmp cd ~ #进入当前用户的家目录 2 ls:列出当前目录的所有文件、文件夹(目录)信息; -l 列出目录或者文件的详细信息。...3 pwd:列出当前目录的路径; pwd #显示当前所在目录的路径 4 whoami:确认当前登录用户的身份; whoami #显示当前用户 who #显示当前系统登录用户以及所登录的控制台...co开头的文件 rmdir #删除空目录 rm -r coco #递归的方式删除非空目录coco rm -rf vivi #直接删除非空目录vivi(不用确认) 18 vi:创建文件或编辑; (...i进入编辑模式,退出编辑按ESC,q表示退出;w表示保存退出;q!...,保存退出 wq) vi coco #编辑coco文件 vi /tmp/vivi #编辑指定目录/tem下的vivi文件 :w #保存修改 :q #退出vi编辑器 :wq #保存并退出

    2.3K30

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

    用户设计器中进行更改后,只需单击一下,就可以使用修改后的Angular标记更新原始HTML文件。...如果对设计器中所做的更改感到满意,请单击WijmoJS 徽标下方的“保存”按钮以更新原始源文件的编辑器并将其重点关注。...请注意,修改后的Angular标记会突出显示,设计器中所做的更改现在会反映在标记中。此时,您可以保存或放弃更改,就像您自己键入更改一样。...项目中,控件属性通常绑定到运行时的数据成员不是文字值。...保存操作期间保留绑定事件; 但是,设计器中没有用于创建或编辑它们的界面。 有关Angular标记的当前限制列表,请参阅Visual Studio Marketplace上的扩展页面。

    5.4K40

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    用户添加,编辑和删除英雄的名字。 将更改保存到服务器。 您将教会应用程序对远程服务器的Web API进行相应的HTTP调用。 当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...你离开的地方 在前一页中,您学会了仪表板和固定英雄列表之间导航,沿途编辑选定的英雄。 这是这个页面的起点。 继续英雄之旅之前,请确认您具有以下结构。 ?...另外,响应中的数据是单个英雄对象不是列表。 未更改的getHeroes API 尽管您对getHeroes()和getHero()做了重大的内部更改,但公共签名没有更改。...更新英雄的细节 尝试英雄详情视图中编辑英雄的名字。 当你输入时,英雄的名字视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。 什么改变了?...如果用户使用鼠标操作粘贴文本,则会触发更改事件绑定。 正如所料,* ngFor从组件的英雄属性重复英雄对象。 但正如你很快就会看到的,英雄的财产现在是一个英雄列表的流,不仅仅是一个英雄名单。

    11K30

    PS模块第九节:PA PLM210详细练习

    2更改您创建的项目配置文件项目概要文件概览中选择包含项目配置文件GR##的行,然后选 择“详细信息”。...找到负责您的组编号##的人员,并在OfficeUser字段中输入您的 SAP用户PLM210-##。保存您的更改。要退出,请选择“返回”。 4....a)项目生成器中打开项目 E-98##,并在必要时展开整个结构。选择 WBS 元素 E-98##-1 工程/设计。若要分支到详细信息视图,请选 择“基本数据”选项卡页面上的“系统/用户状态”图标。...结构树中选择 WBS 元素 E-98##-1。使用处理一状态-用户状态-设置 和传递,并选择用户状态 LPRQ 锁定采购申请。确认消息。保存您的项目。...“订单类型”字段中,输入网络类型GR##,并停用物料可用性 指标。使用复制(输入)确认您的条目。对开放式订单执行相同的操作(业务功能:2)。保存更改并退 出。

    1.7K31

    AngularDart4.0 英雄之旅-教程-06服务 顶

    你开始的地方 继续英雄之旅之前,请确认您具有以下结构。 如果没有,请返回前面的页面。 ? 如果该应用程序尚未运行,请启动该应用程序。 进行更改时,请通过重新加载浏览器窗口来保持运行。...用户可以从列表中选择一个英雄。 不久,您将添加一个仪表板与顶尖的表演英雄,并创建一个单独的视图编辑英雄的细节。 所有三个视图都需要英雄数据。 目前,AppComponent定义了模拟英雄的显示。...要用Angular调用getHeroes(),可以实现Angular ngOnInit生命周期钩子。 Angular为组件生命周期中的关键时刻提供接口:创建,每次更改之后,最终销毁。...有关异步函数的更多信息,请参阅Dart语言浏览中声明异步函数。 处理Future 由于对HeroService的更改,应用程序组件的英雄属性现在是Future,不是英雄列表。...您必须更改实现以完成时处理Future结果。 当Future成功完成时,您将显示英雄。

    2.9K10

    AngularDart4.0 英雄之旅-教程-03英雄编辑

    然后,您将添加编辑英雄信息的功能。 完成后,应用程序应该看起来像这个实例(查看源代码)。 构建结构 开始编写代码之前,让我们验证一下你的结构。 如果没有,您需要返回并按照上一页的设置说明进行操作。...用户应该可以文本框中编辑英雄名字。...您可以编辑英雄的名字,并看到立即在文本框上方的中反映的更改。...此绑定显示Hero的名称,并允许用户更改它。 您将formDirectives添加到应用程序的@Component注解的directives参数,以便Angular知道定义了ngModel的位置。...您还将允许用户选择英雄并显示其详细信息。 您将了解有关如何检索列表并将其绑定到模板的更多信息。

    3.2K10

    Material Design — 提示框( Dialogs)

    ·简单菜单(Simple Menus)显示列表项的选项,简单提示框(Simple Dialogs)可以提供有关列表项的详细信息或操作。...全屏提示框(仅限手机) 全屏对话框最适合于复杂的任务,或需要输入法编辑器,因为它可以保存之前将一系列任务组合在一起。...全屏提示框可用于满足以下标准的内容或任务: ·该提示框包含需要输入编辑器(IME)的组件(如选择器或form fields),例如键盘 ·当没有实时保存更改时 ·当app中没有草稿功能时(无法自动存到草稿...全屏提示框支持日期选择器 操作 屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词,例如:保存,发送,分享,更新或创建。...·如果没有更改,对话框关闭,不需要丢弃确认 ·如果用户进行了任何更改,则会提示他们确认放弃操作 ?

    5.1K101

    实践 | 为 Trackr app 适配大屏幕设备

    大屏幕上的导航轨道 虽然是考虑到较大屏幕的设备进行的此项更改,但由于腾出了更多的纵向空间来显示任务列表,横向模式显示的手机也能够因此受益。...△ 悬浮的编辑组件将关注点放在用户当前的目标内容上 起初我们尝试将编辑任务界面取代任务详细信息 (Task Detail) 显示详细信息窗格中。...双窗格布局中,如果我们详情窗格里将任务详细信息替换为编辑任务,那么看起来似乎没有发生什么变化——界面中必要的视觉强调还不够。...相比之下,DialogFragment 吸引了用户,让关注点处于前面和中间。 在用户保存自己的改动或是我们确认用户的修改可以取消之前,我们希望从编辑任务 (或者新建任务) 界面导航到其他地方。...我们还向您说明了为了更好满足用户的需求,您应该怎样围绕可用性不仅是屏幕空间来重新思考您的设计。 我们希望您喜欢更新和改进后的 Trackr 应用!您可以 查看源代码。

    1.7K20

    Android Studio 3.6 新特性一览(推荐)

    拆分视图取代并改进了早期的预览窗口,并且可以对每个文件进行设置,并且可以保存上下文信息,比如:缩放比例和设计视图选项等。想要开启拆分视图,单击编辑器窗口右上角的拆分图标即可。...这些差异意味着布局和代码之间的兼容将导致编译时而不是运行时的构建失败。...首先定义 JNI 声明,然后 C/C++ 文件中输入“ JNI” 或方法名称来激活 更多详细信息:https://developer.android.google.cn/studio/preview/...扩展控件菜单中嵌入了谷歌地图用户界面,方便开发人员更容易地指定位置,也可以根据两个地点位置创建导航路线。...而且单个一个位置还可以保存并重新作为虚拟位置发送到模拟器,路线导航也可以通过输入地址或单击两个点来生成。这些路线导航可以可以实时回放,路线导航沿线的位置信息也会被发回到模拟器的系统内。 ?

    2.4K20

    pcap.h_程序定义了多个入口点,使用main

    出现“ABAP/4开发工作台”屏幕 选择“ABAP/4编辑器”,“ABAP/4编辑器初始屏幕” 为“程序”字段中创建的程序输入名称(关于创建程序名称的详细信息,参见《命名程序规则》)。...如果用户某组中工作,也许要将程序分配给现有开发类或创建新的开发类。分配给开发类 3. 编写程序 ABAP/4编辑器中编写ABAP/4程序。...选择“保存保存代码。源文本存储程序库中。 4. 测试程序 测试程序检查代码是否正确工作。 为测试目的要运行程序,选择“ABAP/4编辑编辑程序”屏幕上的“程序->执行”。...但是,测试结束后必须返回编辑器以确保所有更改都已保存。 5. 显示或更改程序 本节主要说明如何显示或更改现有程序。此处相关的是技术步骤不是实际代码更改。...如果其他用户锁定该程序对编辑器的访问,则系统显示下列消息:User forbade all changes.在这种情 况下,不能更改程序。

    3.5K10

    如何在Ubuntu 16.04上使用Alerta监视Zabbix警报

    : sudo ln -s /etc/nginx/sites-available/alerta /etc/nginx/sites-enabled/ 保存文件并退出编辑器。...保存文件,退出编辑器,然后重新启动uWSGI服务: sudo systemctl restart alerta-app 然后更改Web界面的身份验证提供程序。...编辑其配置文件: sudo nano /var/www/html/config.js 找到以下部分并将提供者从basic更改为github,并输入您的GitHub客户端ID: ......然后为您的用户帐户添加新媒体。主菜单中选择“ 管理 ”,然后选择“ 用户”。单击您的用户名,然后选择“ 媒体”选项卡。输入以下详细信息 · 对于Type,选择Alerta。...单击“ 添加”按钮保存新媒体类型。 然后验证用户的配置并单击“ 更新”按钮保存设置。 现在配置一个动作来发送消息。主菜单中选择Configuration,然后选择Actions。

    4.1K40

    WSO2 ESB(4)

    编辑 - 单击此图标,修改现有的项目。 删除 - 单击此图标可以永久删除一个项目。将出现一条消息,提示您确认删除。 注册表浏览器 - 单击此图标可以查看注册表浏览器。...他们上传或综合登记处获取。它们是静态的。本地注册表中存在一个条目,有超过一个综合注册表中存在的同名项更高的优先级。 添加本地注册表项 点击导航器上的本地条目。...编辑本地注册表项 使用此选项来修改注册表项。 注册表表的“操作”列中,单击您要编辑的条目对应的编辑图标。注册表项,页面将显示出来。 进行必要的更改,并单击“保存”。...您还可以直接在XML代码进行任何更改。 若要套用您的变更,并点击“更新”按钮保存配置到本地存储。这将首先验证所提供的配置,并警告您有关的任何故障或检测不一致。用户有选择进行更新操作或取消在这一点上。...如果没有检测到故障,配置将被应用,并保存到存储。 复位操作可以用来恢复你所做的任何更改源视图,并恢复到上次保存的配置。 请参阅文档管理细节突触配置。

    4.3K80

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

    详细信息屏幕 中输入以下数据,并调整活动数量“计划42小时”。确保保存数据时写入采购申请。最后,保存更改并返回到SAP主菜单。...字段中,固定供应商输入值1000。单击“分配电源源”按钮以确认条目。通过选择“更改申请”来 保存更改的采购申请。最后,通过单击“返回”来退出报告。...选择Enter以确认您 的条目。您可以项目的详细信息屏幕中(使用适当的图标各个项目之间 移动)或在表概述中(首先关闭详细信息视图)中更改数量并设置 “确定”标志。...d) 服务活动将再次显示详细信息屏幕。如果活动尚未具有“已发布”状态,请选择“编辑-状态-释放”。单击^^图标,确认调度警告消息。 e) 再次,调用项目生成器中的项目以确定采购申请编号。...单击“继续”图标确认字段选择。分析这两个材料组件的数据,然后退出报告保存概述。为此,请 单击“后退”图标。 4.计划版中变更组件 查看项目规划板中的组件概述。

    3.7K22

    AngularDart4.0 英雄之旅-教程-04明细 顶

    在此页面中,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,并允许用户选择英雄并显示英雄的详细信息。 完成此页面后,该应用应该看起来像这个实例(查看源代码)。...必备条件 继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您的结构匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。...当您进行更改时,请通过重新加载浏览器窗口来保持运行。 应用程序重构 添加新功能之前,您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。...' of undefined in [null] 尽管selectedHero.name显示模板中,但必须保留DOM外的英雄详细信息,直到出现选定的英雄。...当表达式为false时,Angular删除选定的类。 ===运算符测试给定的对象是否相同。 模板语法指南中阅读有关[class]绑定的更多信息。

    3K30
    领券