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

当任务终止并重新打开Android Google Chrome时,Angular Router无法解决问题

的可能原因是浏览器的刷新导致了Angular应用的重新加载,而Angular Router默认情况下只会在应用初始化时进行一次路由的初始化,不会在浏览器刷新时重新初始化路由。

为了解决这个问题,可以考虑以下几种方法:

  1. 使用RouterModule.forRoot()方法的onSameUrlNavigation选项来配置路由器的行为。将onSameUrlNavigation设置为reload,这样当浏览器刷新时,路由器会重新初始化路由。示例代码如下:
代码语言:txt
复制
import { RouterModule, Routes, Router } from '@angular/router';

const routes: Routes = [
  // 路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(private router: Router) {
    // 监听浏览器刷新事件,手动重新导航到当前路由
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.router.navigated = false;
        this.router.navigate([this.router.url]);
      }
    });
  }
}
  1. 在应用的根组件中,监听window对象的beforeunload事件,当浏览器即将关闭或刷新时,手动清除路由器的状态。示例代码如下:
代码语言:txt
复制
import { Component, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <!-- 根组件模板 -->
  `
})
export class AppComponent {
  constructor(private router: Router) {}

  @HostListener('window:beforeunload')
  onBeforeUnload() {
    // 清除路由器的状态
    this.router.resetConfig([]);
  }
}
  1. 使用localStoragesessionStorage来保存应用的路由状态,并在应用初始化时恢复路由状态。示例代码如下:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <!-- 根组件模板 -->
  `
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    const savedRoute = localStorage.getItem('savedRoute');
    if (savedRoute) {
      // 恢复保存的路由状态
      this.router.navigateByUrl(savedRoute);
    }
  }

  @HostListener('window:beforeunload')
  onBeforeUnload() {
    // 保存当前路由状态
    localStorage.setItem('savedRoute', this.router.url);
  }
}

以上是解决当任务终止并重新打开Android Google Chrome时,Angular Router无法解决问题的几种方法。根据具体需求和场景选择合适的方法进行实现。

关于Angular Router的更多信息,可以参考腾讯云的产品文档:Angular Router

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

相关·内容

Web 重在当下

在过去的20年里,web 从简陋的文档分享网络进化为一个大平台,具有了当初创建它我们无法想象的能力。...而智能手机革命到来的时候,情形完全改变了,人们抛弃了他们的桌面浏览器(和插件),转移到更加智能化却不那么强大的移动设备上。...Google 也在用各种方法推动 web 平台发展。它们自主研发的操作系统 Chrome OS 是证明 web 将来有多强的能力以及 App Store 未来可能会发展成什么样子的最好例子。...理论上 Google 在 web app 方面的优化取得了很好的进展并且它确实符合 web 在未来几年应该发展的方向,但是目前这些优化只是一个理想化的版本,它只支持 Google 自己在 Android...Google CEO Sundar Pichai 最近向全世界解释了“为印度人解决问题是怎样鼓舞人心的 Google 创新”,所以也许终究“少即是多”。

73730

Angular2入坑指南

angular.js 官网:http://www.apjs.net/ angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。...数据的传递不够直接还有一堆乱七八槽的属性 Android与IOS的代码不够一致 核心太小,一堆补充的库 Angular2的优点: 1、推荐TypeScript而不是原生的Javascript 2、类库特别多...,概念也是特别多 3、体量大 4、成熟度相对偏低,版本2才刚发布 5、不兼容1.x 6、Router还不成熟 综合以上我最终决定选择Angular2作为我前端开发的首选框架。...有官方的UI方案Material Design供选择 官工具链相对于React要成熟 有angular-cli这个便利化的工具,并提供E2E的测试,用以方便测试,保证项目的质量。...然后打开localhost:4200就可以查看效果了。 附:angular-cli的教程与源码地址

2K70
  • 构建具有用户身份认证的 Ionic 应用

    它允许使用邮箱及密码验证身份,也可以使用社交提供商比如 Facebook、Google 和 Twitter 登录。你可以使用 @ionic/cloud-angular 依赖中提供的类创建身份认证。...出现提示输入 "y",按回车。 TIP: 我发现在模拟器中运行应用程序时的最大问题是键盘很难弹出。...打开 Safari 转到 Develop > Simulator > MyApp / Login,你会看到控制台有一条错误信息。如果你看不到开发菜单,重新执行 这篇文章 中的方法使其生效。 ?...只要你已经设置了你的手机、电脑以及 Apple ID,你就可以打开应用登录。以下是在我的手机上的展示效果。...如果你已经安装了Android Studio,请确保打开它以完成安装。 为了部署到 Android 模拟器,运行 ionic cordova emulate android

    23.2K50

    使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CICD

    Google Cloud 可以获得300美元的积分,所以我决定从那里开始。 在 Google Cloud 上安装 Jenkins X 创建群集 浏览到cloud.google.com登录。...Cloud Shell 将在一小终止在你的主目录之外所做的任何更改,因此你可能必须重新运行这些命令。...提示安装 ingress controller ,按 Enter 键 确定。再次按 Enter 键选择默认 domain。 系统将提示你创建 GitHub API Token。...您进入生产环境,URL通常也是众所周知的。但是,使用 Jenkins X,URL 是动态的,根据你的 pull request 编号动态创建的。...当我第一次在 Jenkins X 中尝试这个功能,我发现 jenkins-maven 代理没有安装 Chrome

    4.3K10

    构建具有用户身份认证的 Ionic 应用

    它允许使用邮箱及密码验证身份,也可以使用社交提供商比如 Facebook、Google 和 Twitter 登录。你可以使用 @ionic/cloud-angular 依赖中提供的类创建身份认证。...出现提示输入 "y",按回车。 TIP: 我发现在模拟器中运行应用程序时的最大问题是键盘很难弹出。...打开 Safari 转到 Develop > Simulator > MyApp / Login,你会看到控制台有一条错误信息。如果你看不到开发菜单,重新执行 这篇文章 中的方法使其生效。 ?...只要你已经设置了你的手机、电脑以及 Apple ID,你就可以打开应用登录。以下是在我的手机上的展示效果。...如果你已经安装了Android Studio,请确保打开它以完成安装。 为了部署到 Android 模拟器,运行 ionic cordova emulate android

    23.8K00

    node调试工具入门

    一共有两种打开调试工具的方法,第一种是在 Chrome 浏览器的地址栏,键入 chrome://inspect或者about:inspect,回车后就可以看到下面的界面。 ?...命令行下,按下 ctrl + c,终止运行app.js。 五、调试非服务脚本 Web 服务脚本会一直在后台运行,但是大部分脚本只是处理某个任务,运行完就会终止。这时,你可能根本没有时间打开调试工具。...访问chrome://inspect,就可以进入调试工具,调试这段代码了。 ? 代码放在setTimeout里面,总是不太方便。那些运行时间较短的脚本,可能根本来不及打开调试工具。...打开调试工具的前提是,启动 Node 脚本就加上--inspect参数。如果忘了这个参数,还能不能调试呢? 回答是可以的。首先,正常启动脚本。...$ kill -SIGUSR1 30464 七、参考链接 Debugging Node.js with Google Chrome, by Jacopo Daeli Debugging Node.js

    51840

    Node 调试工具入门教程

    一共有两种打开调试工具的方法,第一种是在 Chrome 浏览器的地址栏,键入 chrome://inspect或者about:inspect,回车后就可以看到下面的界面。...命令行下,按下 ctrl + c,终止运行app.js。 五、调试非服务脚本 Web 服务脚本会一直在后台运行,但是大部分脚本只是处理某个任务,运行完就会终止。这时,你可能根本没有时间打开调试工具。...访问chrome://inspect,就可以进入调试工具,调试这段代码了。 代码放在setTimeout里面,总是不太方便。那些运行时间较短的脚本,可能根本来不及打开调试工具。...打开调试工具的前提是,启动 Node 脚本就加上--inspect参数。如果忘了这个参数,还能不能调试呢? 回答是可以的。首先,正常启动脚本。...$ kill -SIGUSR1 30464 七、参考链接 Debugging Node.js with Google Chrome, by Jacopo Daeli Debugging Node.js

    83760

    教程|在 Angular 4 中加载功能模块(下)

    您的任务是将新模块合并到主应用程序中。 从应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。...您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。...第一次请求某个新路径,会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。 更新 UI 接下来,将会更新用户界面。...要为预加载重新配置应用程序,可编辑您的 app-routing.module.ts,如下所示。下面的代码导入了预加载模块调用它们的功能。 清单 5....在 Chrome 浏览器中重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。

    2.3K10

    React Native项目组织结构介绍

    Router组件实际上包装的官方的Navigator组件,主要作用: 负责整个app的所有路由,使用navigator去跳转路由,会最终进入renderScene函数来渲染不同的页面。...提供了默认router,整个程序启动,默认加载页面ProjectList。 各个页面:不同路由对应不同的页面,如Routers的renderScene函数中,每个if分支是一个页面。...我自己用到了以下情况: 父改变子: 子通过state对外提供接口,父可以通过setState去改变子的状态,让子重新渲染。state是React的一个很重要的概念。...chrome会自动跳转到调试地址,在浏览器上打开调试窗口,会发现里面多了一个react页签。...遇到这种问题,最好去google一下,或去github看下有没有类似的议题。实在不行就通过注释代码的方法排除。 JSX的语法经常搞错,跟一般的模板语言不太一样。

    2.5K70

    【ASP.NET Core 基础知识】--前端开发--集成前端框架

    模型数据发生变化时,视图会自动更新,反之亦然,简化了数据管理和操作。 模块化架构: Angular使用模块化的架构,允许将应用程序拆分为多个独立、可重用的模块。...访问项目: 打开浏览器访问 http://localhost:5000,应该能够看到 ASP.NET Core 应用程序的欢迎页面。...在项目目录中初始化 npm: 打开命令行界面,进入到项目目录,执行以下命令初始化 npm: npm init -y 安装前端框架依赖: 例如,如果要安装 Vue.js,执行以下命令: npm install...在项目目录中初始化 Yarn: 打开命令行界面,进入到项目目录,执行以下命令初始化 Yarn: yarn init -y 安装前端框架依赖: 例如,如果要安装 Vue.js,执行以下命令: yarn...的主页面 await next(); } }); 处理路由冲突 使用 Angular 路由,需要确保前端路由和后端路由不会发生冲突。

    14800

    2020vue面试题及答案_人际关系面试题及答案

    5、computed不支持异步 ,computed内有异步操作无效,无法监听数据的变化;而watch支持异步。...使用 URL 的 hash 来模拟一个完整的 URL,于是 URL 改变,页面不会重新加载。...是由googl提供支持的,初始发行于 2016年9月;React由Facebook维护,初始发行于 2013年3月;Vue是由前google人员创建,初始发行于2014年2月 2.应用类型不同:Angular... Vue 处理指令,v-for 比 v-if 具有更高的优先级,通过v-if 移动到容器元素,不会再重复遍历列表中的每个值。...包裹动态组件,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 37、vue-loader 是什么?用途有哪些? 解析.vue文件的一个加载器。

    8.7K20

    使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CICD

    Google Cloud 可以获得300美元的积分,所以我决定从那里开始。 在 Google Cloud 上安装 Jenkins X 创建群集 浏览到cloud.google.com登录。...Cloud Shell 将在一小终止在你的主目录之外所做的任何更改,因此你可能必须重新运行这些命令。...提示安装 ingress controller ,按 Enter 键 确定。再次按 Enter 键选择默认 domain。 系统将提示你创建 GitHub API Token。...您进入生产环境,URL通常也是众所周知的。但是,使用 Jenkins X,URL 是动态的,根据你的 pull request 编号动态创建的。...当我第一次在 Jenkins X 中尝试这个功能,我发现 jenkins-maven 代理没有安装 Chrome

    7.7K70

    谷歌浏览器Chrome与ChromeDriver版本不一致问题全解

    在学习使用selenium模块爬取动态渲染信息,selenium模块需要通过浏览器驱动来控制浏览器的操作。...Mac 一种方法:打开终端,输入命令 defaults write com.google.Keystone.Agent checkInterval 0 ,重启chrome。...Windows 10 首先是「右键计算机->管理」,在「计算机管理(本地)->系统工具->任务计划程序->任务计划程序库」中找到两个和Google自动更新相关的任务计划「GoogleUpdateTaskMachineCore...然后在下方的「服务和应用程序->服务」中,找到两个和Google更新相关的服务「Google更新服务(gupdate)」、「Google更新服务(gupdatem)」,右键,选择属性,把启动类型改为禁用...---- 果然不出所料,此方法不能解决问题。 尝试四 使用浏览器驱动管理器模块自动识别下载驱动。

    4.3K40

    【Web技术】850- 深入了解页面生命周期API

    每个前端开发人员都应该知道的浏览器API 作为用户,我们在浏览网页总喜欢一心多用。因此,打开多个浏览器标签页是很常见的,因为这有助于并行完成事情。...由于不可能限制用户打开新的浏览器标签页并将其留下,因此浏览器采取了一些措施,以在浏览器标签页不活动重新分配资源。...它不能捕获被操作系统丢弃的页面(Android、IOS和最新的Windows系统可以终止后台进程以保存系统资源)。 我们来看看页面生命周期API所暴露的页面生命周期状态。...你可以在此时坚持未保存的应用状态,停止任何用户不需要在后台运行的UI更新或任务。 Frozen状态 - 任何可能影响其他标签页的定时器和连接都应该在这个阶段终止。...为了克服跨浏览器的不兼容性,Google开发了一个名为Pagelifecycle.js的库,作为以下浏览器的多维填充。 总结 当用户没有积极参与,网页不应该消耗过多的资源。

    1.3K20

    【译】使用 Web Workers 优化 JavaScript 应用程序性能

    如果你尚未安装,则可以选择适用于 Google ChromeChrome 扩展程序。 本文章假设读者拥有 HTML,CSS 和 JavaScript 的基本知识。...主线程执行一个需要非常长时间的任务,阻塞就会发生,阻塞会影响其他所有任务的执行,会导致web程序执行缓慢或是卡顿,这对于用户体验来说是非常糟糕的。...可以通过调用 worker 上的 terminate() 方法终止 worker。无论是否正在执行任务,这都会立即终止 worker。worker 也可以在它自己的线程内被终止。...书签栏中的“应用”快捷方式或导航到 chrome://apps 来打开Web Server for Chrome。...为了探究动画冻结的原因,重新加载浏览器标签,打开开发者工具(F12 或 Ctrl + Shift + I),切换到 Performance 标签页。

    1.8K10

    我是如何用这3个小工具,助力小姐姐提升100%开发效率的。

    UserScript== (function() { 'use strict'; alert('hello world') // Your code here... })(); 没错打开任意一个...在A系统登录之后,跑到其他系统需要重新登录。 2. 登录时效只有2小,2小后,需要重新登录 该如何解决?...登录时效只有2小,2小后,需要重新登录已无力回天 我们不好直接侵入各个系统去改造登录逻辑,改造其登录时效,但是却可以对登录页面(示例)做点手脚 image.png 最关键的是: 用户名输入框 密码输入框...分析和解决问题 通过上面的介绍您应该可以感觉到我们开发阶段遇到需要频繁切换账号做测试的烦恼,相对繁琐的ua生成过程导致了它一定是个费时费力的麻烦事。...,可一键重新生成即可 为什么是chrome插件 浏览器中发送ajax请求的ua无法直接修改,但是chrome插件可以修改请求的ua(很重要的一点) chrome插件popup模式可直接在当前页面打开,无需跳出开发页面

    1.2K30

    史上最全的前端资源大汇总

    移动端 ---- fastclick no-click-delay 【敏捷开发】Android团队开发规范 Android 开发规范与应用 ionic 13....Gulp ---- Gulp官网 Gulp中文网 gulp资料收集 Gulp:任务自动管理工具 - ruanyifeng Gulp插件 Gulp探究折腾之路(I) Gulp折腾之路(II) Gulp...推荐作品 ---- winter代码片段需要访问外国网站 fgm 岑安作品集 耐特demo集合 米空格 js作品 myFocus SeaJS组件库 颜海镜作品 脚儿网作品 javascript个人作品...Chrome ---- Google Chrome 官方 Chrome - 基础 Chrome - 进阶 Chrome - 性能 Chrome - 性能进阶 Chrome - 移动 Chrome -...移动,微信调试 ---- 浏览器端调试安卓 移动端前端开发调试 使用 Chrome 远程调试 Android 设备 mac移动端调试 mac移动端调试 无线调试攻略 无线调试攻略 屌爆了,完美调试

    13.5K61

    避不开的算法,如何吃透?

    算法是为执行特定的任务而设计的一组指令。 有些算法很简单,而有些则非常复杂,具体取决于你要实现的目标。 算法的历史 了解历史总是有好处,因为历史可以帮助你更好地理解主题,了解何时使用这些知识。...有限性:算法必须在有限步骤后终止。假设输入错误的情况下,算法在第一步就终止,我们将永远无法得知算法有什么问题。而且,算法也不能陷入无限循环。...时间复杂度是指算法花完成任务所需的操作数。以最少操作数执行任务的算法就是最有效的算法。此外,算法花费的时间还取决于计算机的计算速度,但是在我们考虑算法的效率率,通常不会考虑这些外部因素。...算法是每个应用程序(Google Chrome与Mozilla Firefox、Uber与Ola)最大的不同之处,例如Google Chrome和Mozilla Firefox都是搜索引擎应用程序,它们提供相同的结果...Google的排序算法与Firefox不同。 算法无处不在,并将继续传播,算法让我们的生活更加轻松,但我们还需要考虑一些问题,例如, 有一天数据和预测模型统治世界,那么我们就会丧失人性和判断力。

    34810
    领券