首页
学习
活动
专区
工具
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 创新”,所以也许终究“少即是多”。

74330

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.3K50

    构建具有用户身份认证的 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

    使用 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

    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

    52540

    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

    85160

    教程|在 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

    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

    【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 路由时,需要确保前端路由和后端路由不会发生冲突。

    24400

    使用 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.4K40

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

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

    1.3K20

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

    移动端 ---- 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

    前后端分离后的前端时代,使用前端技术能做哪些事?

    可以在浏览器上打开,也可以在微信或各种APP内打开(这也是一直APP内webview打开的方式) [12.png] H5游戏 H5游戏已经见怪不怪了,当年微信退出打飞机游戏的时候,推动了H5游戏的大发展...Chrome APP Chrome浏览器上运行的插件,是运行在Chrome上的HTML应用,完全使用前端技术开发制作。...2010年Google推出了基于Chrome开发的PC端操作系统Chrome OS,特点就是速度快,设计简洁等,相对应的市场上也推出了很多基于Chrome OS的笔记本电脑,厂商有三星和戴尔等。...Web VR、Web AR 这两年,新兴并大火的技术是人工智能和机器学习,紧接着的应该就是VR、AR了吧,去年年底QQ和支付宝都在AR和VR方面做出尝试,在抢红包上进行实践。...像Angular、React或Vue就是为了SPA而设计的,结合前端路由库(react-router、vue-router)和状态热存储(redux、vuex)等,可以开发出一个媲美Native APP

    2.3K30

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

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

    1.8K10

    安卓Chrome使用技巧合辑

    "和"PKP"两个选项打勾后点按"Add按钮提交,即可在使用Chrome默认的搜索功能时强制google.com.hk采用https协议,从而避免Hosts访问外国网站后使用Chrome自带搜索时由于其默认使用...http协议而造成的页面无法打开的问题。   ...使用方法:直接复制下述内容中每项的伪链接(以chrome://开头),粘贴到Chrome浏览器的地址栏并回车,即可打开Chrome的实验室特性页面并快速定位到相应项目。   1...."使网页适合移动设备"的按钮,点击此按钮,Chrome将会对当前网页重新排版为阅读模式。   ..."稍后下载此网页"特性:   chrome://flags/#offline-pages-async-download   启用此特性后,当某网页因为某种原因(如网络原因,目标网站服务器等)暂时无法正常加载时

    9.6K30
    领券