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

如何保存路由器状态并在angular 6中按back按钮返回到路由器状态

在Angular 6中,可以使用Angular的Router模块来保存和恢复路由器状态,并且在按下浏览器的返回按钮时返回到之前的路由器状态。下面是一种实现方法:

  1. 导入所需的模块和服务:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
  1. 在组件的构造函数中注入Router服务:
代码语言:txt
复制
constructor(private router: Router) { }
  1. 在组件的ngOnInit生命周期钩子中,订阅路由器的导航结束事件,并保存当前的路由器状态:
代码语言:txt
复制
ngOnInit() {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(() => {
      // 保存当前的路由器状态
      this.saveRouterState();
    });
}
  1. 实现保存和恢复路由器状态的方法:
代码语言:txt
复制
saveRouterState() {
  const routerState = this.router.routerState.snapshot;
  localStorage.setItem('routerState', JSON.stringify(routerState));
}

restoreRouterState() {
  const routerState = JSON.parse(localStorage.getItem('routerState'));
  if (routerState) {
    this.router.navigateByUrl(routerState.url);
  }
}
  1. 在需要返回到之前的路由器状态的地方调用restoreRouterState()方法:
代码语言:txt
复制
goBack() {
  // 返回到之前的路由器状态
  this.restoreRouterState();
}

通过以上步骤,你可以在Angular 6中保存路由器状态并在按下浏览器的返回按钮时返回到之前的路由器状态。请注意,这种方法使用了浏览器的本地存储(localStorage)来保存路由器状态,因此请确保浏览器支持本地存储功能。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议你参考腾讯云的官方文档和产品介绍页面,以了解他们提供的云计算解决方案和相关产品。

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

相关·内容

AngularDart 4.0 高级-路由概述 顶

您可以将路由器绑定到页面上的链接,并在用户单击链接时导航到适当的应用程序视图。当用户点击按钮,从下拉框中选择,或者响应来自任何来源的其他刺激时,您都可以进行命令式导航。...并且路由器在浏览器的历史记录中记录活动,所以后退和前进按钮也起作用。 设置概述 添加angular_router 路由器功能位于angular_router库中,该库自带软件包。...RouteDefinition 定义路由如何根据URL模式导航到组件。 Route 一种RouteDefinition。 定义路由器如何根据URL模式导航到组件。...如果您点击了浏览器的后退按钮而不是“返回”按钮,该应用程序也会将您返回到英雄列表。 Angular的应用程序像正常的网页导航一样更新浏览器的历史。 现在点击危机中心链接查看正在进行的危机列表。 ?...与英雄细节不同,当您键入更新时,危机细节更改是暂时的,直到您通过下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮回到危机中心及其危机列表。 不要单击任一按钮

6.1K20

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

添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段中。 调用服务来获取Angular ngOnInit()生命周期钩子中的英雄。...主要的变化是如何得到英雄的名字。...按钮的点击事件绑定到一个gotoDetail()方法,该方法应该通过告诉路由器去哪里命令性地导航。 这种方法需要对组件类进行以下更改: 导入angular_router。...你走过的路 以下是您在此页面中所取得的成果: 您添加了Angular路由器来浏览不同的组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择的英雄的细节。

17.5K30
  • 解决Windows 11网络连接问题:教你轻松排查网络故障

    在任务栏中,点击 Internet 图标以检查 Wi-Fi 的状态并确保已打开。 检查以确保飞行模式是关闭状态。现在检查其他Wi-Fi 网络并选择您最信任的网络。...选择“网络重置”,然后点击“立即重置”按钮。 点击是,并在重新启动系统后测试您的 Wi-Fi 连接。...回到设置,选择系统,点击疑难解答选项。点击“其他疑难解答”; 对于 Internet 连接,点击“运行”按钮。 请按照屏幕上的说明进行操作,Windows 将引导您完成此过程。...在有互联网问题的电脑上安装下载好的文件,并在需要时重新启动系统。然后,测试您的 Wi-Fi 连接。 如果想了解Dell SupportAssist如何更新驱动,可以点击文末【推荐阅读】中的链接。...在每个命令之后下回车键。

    17310

    记录一次路由器问题

    先设置主路由器,搜索网址 http://192.168.1.1 然后进入主路由器的设置界面 注意操作顺序,先点击网络参数,继续点击LAN口设置,把主路由器的LAN地址设置为192.168.1.1 点击保存...有些电脑的网页此时可能会重启,重启后回到设置界面点击(页面没有重启一样接着下面的操作)点击无线设置,继续点击基本设置,SSID随便填(这个用来是设置你主路由器的WiFi号) 信道:从1到13随便选一个...进入主路由器的设置界面,然后在左侧选项条中点击运行状态,在WAN口状态栏可以找到DNS服务器,一共有两个,主DNS和备选DNS服务器,拍照或写在纸上保存这俩个数据。...SSID,点击连接按钮回到先前的界面,加密方式选WPA-PSK,密钥填主路由的密钥。...主和备选DNS服务器填最开始保存的地址保存 拔下副路由器上插在LAN上的那根线,插回主路由器LAN上,把副路由器拿到你要放置的地方,插上电源,就可以用手机连接副路由器上网了!

    94020

    TeamViewer远程唤醒主机实战教程(多图

    接下来,列表中会出现一个MAC地址为"10:DD:B1:**:**:B0",状态为“生效”的条目。这样下次网卡再请求IP地址的时候,路由器就会为它分配“192.168.1.20”这个地址了。 ?...配置完路由器回到我们的电脑上重新激活网卡,可以看到IP地址已经更新为“192.168.1.20”,说明我们对路由器的设置生效了。...而对于PC机来说,需要在BIOS中激活“LAN Wakeup”的功能,而每次Wakeup就像是你了主机电源按钮一样,主板上电、自检、引导、进入操作系统…… ?...再来说说如何配置TeamViewer吧,我们在软件的“首选项”中,点击“常规”选项卡上的“LAN唤醒”功能的“配置”按钮。 ? 在弹出的对话框中填上我们的动态域名以及端口号“6”,然后保存设置。 ?...进入手机的TeamViewer APP,注意我们还是要使用3G连接网络,我们会看到这台主机已经是离线状态了,而右边多出来一个“电源开关”样子的按钮。 ?

    5.7K41

    AngularDart 4.0 高级-生命周期钩子 顶

    组件有一个由Angular自己管理的生命周期。 Angular创建它,渲染它,创建和渲染它的子项,在数据绑定属性发生变化时对其进行检查,并在将它从DOM中删除之前对其进行销毁。...生命周期序列 通过调用其构造函数创建组件/指令后,Angular在特定时刻以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...其他生命周期挂钩 其他Angular子系统除了这些组件钩子可能有自己的生命周期钩子。 例如,路由器也有自己的路由器生命周期挂钩,可以让我们利用路由导航中的特定时刻。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...peek-a-boo存在以显示Angular如何预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志的状态。 ?

    6.2K10

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...ngDoCheck:检测并在Angular上下文发生变化时执行。每次更改检测运行时,会被调用。 ngOnDestroy:在Angular销毁指令/组件之前清除。...在成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象的树,同时包含路由器的当前状态。在重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新的状态。...保护运行后,它将解析路由数据并通过将所需的组件实例化到 中来激活路由器状态。...它是如何Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。

    17.3K80

    树莓派4B系统搭建(超详细版)

    如何登陆路由器 先进入cmd获取路由器IP地址,在命令行输入ipconfig 查看默认网关,就能知道它的IP地址。复制IP地址,到网页访问就能登陆。...注意,如果路由器默认打开AP隔离,则需要手动在路由器后台关闭,否则树莓派无法连接到路由器 链接:点击下载putty提取码:jw3o 打开putty,输入IP后点击open按钮 进入之后是这样 树莓派默认登录名是...修改完以后,tab键退出选项,选择back按钮返回。...1、有鼠标键盘的那部分,步骤操作。...raspbian/raspbian/ buster main 执行下面两条指令更新软件源及软件 sudo apt-get update sudo apt-get upgrade 如果有不懂nano修改文件后如何保存的问题

    3.5K50

    Blazor 中的路由和路由模板

    在客户端上,路由器参与多种情况,最常见的情况是用户单击链接、表单上的提交按钮或下拉列表中触发服务器调用的项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径的整个过程。...毋庸置疑,当应用程序的位置以编程方式更改时,路由器也会启动。最后一点也非常重要,路由器在浏览器历史记录中记录任何它负责的位置更改,因此后退和前进按钮可以用户的期望工作。...路由器之战:Blazor 与Angular 很长一段时间,路由逻辑的实现都隐藏在 Web 服务器或服务器端框架(如 ASP.NET)的折叠中。...路由器的实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端的。让我们花点时间对合并的 Angular 路由器和仍在使用的 Blazor 路由器中的功能进行简要比较。...与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到的。

    8.4K21

    如何制作自己的原生 JavaScript 路由

    history.back() 与 history.go(-1) 相同,或者当用户在浏览器中单击 Back 按钮时。你可以用任何一种方法达到相同的效果。...当用户下浏览器的 Forward 按钮时,将执行 history.forward(),它等效于 history.go(1)”。...使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。这样做会产生 popstate事件。...到目前为止,我们仅从前端更改了路由器地址。假定每次你导航到出现在路由按钮上的 URL 时,实际上都会从服务器单独加载该 URL。...因此你有责任确保/page/about 将路由器和页面的加载到应用程序的根视图中。它还应突出显示“current”按钮。 实施完毕后,你的路由就完成了。

    3.8K20

    8分钟为你详解React、Angular、Vue三大框架

    RxJS限制了状态的可见性和调试,但这些问题可以通过像ngReact或ngrx这样的反应式附加组件来解决。 支持Angular Universal,可以在服务器上运行Angular应用程序。...该组件显示了一个按钮,并打印出按钮被点击的次数。 ? 2、模板 Vue使用基于HTML的模板语法,允许将渲染的DOM绑定到Vue实例的底层数据。...结合反应式系统,Vue能够计算出需要重新渲染的组件的最小数量,并在App状态发生变化时,启动最小量的DOM操作。...此外,当某些浏览器事件发生在按钮或链接上时,使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。...8、官方程序库 Vue Router - Vue.js的官方路由器 Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。

    22.1K20

    Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

    一个url对应的一个页面,在angular2中是一个组件。定义一个规则。...设计的时候,先去 基础知识 大多数带路由的应用都要在index.html的标签下先添加一个元素,来告诉路由器如何合成导航用的URL。...import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/...我们可能不得不进行跨字段的校验,可能要找服务器进行校验,可能得把这些改动保存成一种待定状态,直到用户或者把这些改动作为一组进行确认或撤销所有改动。...如果用户选择了确认,那就进行保存。 在保存成功之前,我们还可以继续推迟导航。如果我们让用户立即移到下一个界面,而保存却失败了(可能因为数据不符合有效性规则),我们就会丢失该错误的上下文环境。

    3.3K10

    【19】进大厂必须掌握的面试题-50个React面试

    React与Angular有何不同? 类别 React Angular 1.架构 只有MVC的观点 完整的MVC 2.渲染 服务器端渲染 客户端渲染 3....减速器–一个确定状态如何变化的地方。 商店–整个应用程序的状态/对象树保存在商店中。 查看–仅显示商店提供的数据。 40.显示数据如何流过Redux? 等你来回答。...如果不需要完成任何工作,它将原样返回以前的状态。 43.在Redux中存储的意义是什么?...商店是一个JavaScript对象,它可以保存应用程序的状态并提供一些帮助程序方法来访问状态,调度动作和注册侦听器。应用程序的整个状态/对象树保存在单个存储中。因此,Redux非常简单且可预测。...这对于初始渲染非常有用,并在优化应用程序性能时提供了更好的用户体验。 开发人员工具–从操作到状态更改,开发人员可以实时跟踪应用程序中发生的所有事情。

    11.2K30

    一个设置,改变网络设备体验

    4.点击单选按钮使用下面的 DNS 服务器地址,在首选 DNS 服务器中填写的 112.124.47.27和在备用 DNS服务器中填写 8.8.8.8或者您的ISP提供的备用DNS地址。...2.在网络和 Internet部分中,单击查看网络状态和任务。 3.在右侧的查看活动网络中,单击当前已连接的网络(如下图)。 4.在连接状态窗口下方,单击属性。...8用户: 1.Win(徽标键) X键,打开菜单,选择控制面板。 2.在网络和 Internet部分中,单击查看网络状态和任务。 3.在右侧的查看活动网络中,单击当前已连接的网络(如下图)。...4.在连接状态窗口下方,单击属性。 5.在连接属性窗口选择Internet 协议版本 4 (TCP/IPv4),单击属性。...5.单击确定/应用或者保存,然后关闭路由器设置界面。

    85670

    Netgear网件R7000路由器折腾上网

    1、刷机有风险,如果变砖请自行解决; 2、固件版本来源于http://koolshare.cn; 3、教程网页打开之后不要随意刷新(毕竟刷机过程中大部分时间处于断网状态); 4、网件路由器设置相比TP-Link...梅林固件版本(R7000_380.70_0-X7.9.1-koolshare.trx); 9、上网工具版本(shadowsocks_4.1.7); 10、(OFW)固件版本(Merling-R7000-back-to-ofw.trx...重启完成后重新登入后台,打开路由器设置界面,进入“软件中心”,首先点击“更新”按钮,将更新软件中心到最新版本,然后即可安装并使用插件。 image.png 第八步:安装离线包。...image.png 安装完毕之后返回到软件中心,可以看到上网图标了。 image.png 点开“上网” image.png 按需添加节点类型。我这里是×××兼容SS,所以我直接添加SS节点。...image.png 运行状态:“国内链接”及“国外链接”都显示正确。 image.png 就可以连接Wi-Fi上网了。

    6.5K30

    树莓派 网络设置_树莓派4b教程

    在这节课里,你将会学到如何: 使用网线连接到以太网 在Raspbian和Occidentalis上使用无线网卡 找到树莓派的IP地址 使用有线网络 最快的把树莓派接入到因特网的方法是使用一根以太网线把树莓派连接到你家的路由器上...这个服务运行在你的路由器上,它会给任何通过网线或者WiFi连接到路由器上的设备分发IP地址。 如果你的路由器没有打开DHCP服务,那就要使用另一台已经连接到网络里的计算机进行配置。...如果你想使用命令行工具通过以太网登录,你可以看看后面的如何手动编辑/etc/network/interfaces。 步骤1. 双击图标你将会看到下面的界面。 步骤2....点一下Scan按钮将会打开第二个窗口。招待你的无线网名双击它,将会开启一个新窗口。 步骤3. 在PSK框内输入你的密码然后点一下Add。当你回到第一个窗口的时候,你将会看到连接已经可以使用了。...当完成时一下Ctrl+X。系统会提示你是否保存更改。 一下”Y”将会返回到命令行状态。 步骤5. 关闭你的树莓派,插上无线网卡然后启动它。你就会发现当它启动之后就会自动连接到网络里了。

    2.8K20

    网络设备硬核技术内幕 路由器篇 7 汤普金森漫游网络世界(下)

    那么,CPU是如何为汤普金森先生找到路由表项的呢? 原来,CPU存储和检索路由表项的方法,与NP线卡存储FIB表的方法,有着根本的区别。...但是,主控板上的RIB(Route Information Base,路由信息库),是只能保存在DRAM里的。这是为什么呢? 原来,RIB的大小远远大于FIB。...汤普金森先生被扔回到NP芯片的传送带里。...但,这个接口现在拥塞状态,你看数据包都挤得跟豆包似的……” 汤普金森先生问:“为什么会拥塞呀?” “能不嘛,你看你这来自100G接口的,非要从1G接口出去。”绿洲精灵翻了翻白眼。...本期问题: 如果路由器TD方式丢包,汤普金森先生能否走出这台路由器

    58520

    Angular 5.0.0发布!

    Angular Universal状态转交API及对DOM的支持 这样更便于在服务端和客户之间共享应用状态Angular Universal是一个帮助开发者执行服务端渲染(SSR)的项目。...通过把状态从服务器传送到客户端,开发者就不用再发第二次HTTP请求了。状态转交的相关文档几周后会发布。 Angular Universal团队还把平台服务器Domino加到了平台服务器中。...保留空白 过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。 可以在每个组件的装饰器中指定这个配置,而当前的默认值为true。...新的路由器生成周期事件 我们给路由器添加了新的生命周期事件,让开发者可以跟踪running guard启动到激活完成的各个阶段。...这些事件可在有子组件更新时,在一个特定的路由器出口上展示加载动画,或者测量性能。

    4.4K40

    2-CH579M+ESP8266(WiFi)基本控制篇-整体运行测试-微信小程序使用APUConfig配网绑定ESP8266,并通过MQTT和单片机CH579M实现远程通信控制

    ,输入自家路由器密码 4.长按开发板上面的RST按键引脚大约3S,直至指示灯快闪(已经被底板遮挡了) 4.点击 APP 绑定设备按钮 绑定成功以后自动跳转到主页面,并添加了一个设备 可以点击下面的地方连接自己原先连接路由器...4.注意 常理来讲,应该是模块获取到路由器信息,然后连接上之后再把自己的MAC传递给APP,然后实现绑定....但是以上程序并没有这样做,因为测试发现,如果控制了模组连接路由器,会导致APP断开和wifi的无线连接. 5.现在看下微信小程序的绑定程序,点击添加设备菜单跳转到添加设备页面 6.点击添加WiFi设备按钮跳转到绑定页面...7.点击绑定按钮连接WiFi模块的热点,初始化UDP 注:用户不用过于关心内部细致的流程,以后移植使用的时候知道大体就可以 8.连接上热点以后允许UDP每隔1S发送路由器信息给WiFi模组 9...MQTT回调函数 18.在定时器里订阅主题 19.在MQTT接收回调函数中接收处理数据 20.点击按钮发布继电器控制命令 结语 这节测试了基本的MQTT远程通信控制,在后面的章节中将学习到整个流程是如何实现的

    58521
    领券