angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复
angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误。
那么在我们遇到异常时,首先要做的是什么?
第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正。
第二步:调试代码,观察调用过程中参数传递是否正常。
第三步:百度一下。
对于我这个观点,可能会有人不服气,出现异常不应该第一时间问度娘吗?对于较熟悉angular 路由的人来说,这确实是一个快速的解决问题之道,但不是我们学习的根本。我们学习要知根知底。
对于angular的子路由,我们来看一个例子
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Leftlistzuhezuheleftlistform1030RootComponent } from './components/root-component/rootcomponent';
import { RootComponent as zuheRight2Form1030RootComponent } from '../../../../zuheright2form1030/components/root-component/rootcomponent'; const routes: Routes = [
{
path: '', component: Leftlistzuhezuheleftlistform1030RootComponent,
children: [{
path: 'KK/:id/:name'
, component: zuheRight2Form1030RootComponent
}
]
}
]; @NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [
RouterModule
]
})
export class Leftlistzuhezuheleftlistform1030zuheleftListForm1030RoutingModule { }
我们如何进行路由跳转呢,我们一般通过路由组件的navigate方法,而不是通过超链接,毕竟通过代码可以自定义变量、自定义url、自定义一系列东东。
import { Injectable } from '@angular/core';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
@Injectable()
export class ZuheleftListForm1030FrmVfvfvfService {
constructor( private router: Router,
private route: ActivatedRoute) { } dk() {
console.log("执行路由跳转");
this.router.navigate(["right1"],{relativeTo:this.route});
}
}
当我们通过我们自定义的方法进行路由跳转时,我们看到控制台输出了 执行路由跳转字样,说明这个方法被调用了,但是同时我们在控制台也看到了一个错误:Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 。虽然该错误并没有被标记成error但我们仍要解决下,否则路由跳转会出现让我们意想不到的结果。
如何解决该问题呢?通过分析我们代码,我们发现我们自定义的方法并没有包含在angular 的ngZone中,那么什么是ngZone呢。
了解了一系列的原因,解决该问题就比较简单了,从ngZone中去执行路由跳转,即可。
处理方式:
import { Injectable,NgZone } from '@angular/core';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
@Injectable()
export class ZuheleftListForm1030FrmVfvfvfService {
constructor(
private router: Router,
private route: ActivatedRoute,
private ngZone: NgZone, ) { } dk()
{
console.log("执行路由跳转");
this.ngZone.run(()=>{
this.router.navigate(["kk"],{relativeTo:this.route}).then();
});
}
}
angular 路由跳转经常出现找不到匹配Url的问题,针对这个问题,我们首选的方案是将子路由相对当前路由进行跳转。也就是我们在执行
this.router.navigate(["kk"],{relativeTo:this.route}).then();
加上relativeTo的原因。相对当前路由进行跳转,可以最大限度的减少路由地址不匹配的问题。 angular 路由需要我们持续的去审阅,多尝试,多阅读,必然了然于心。
angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复的更多相关文章
- vue 二级子路由跳转不了 bug
vue 二级子路由跳转不了 bug @click.prevent 阻止原生事件的冒泡 <li class="tools-hover-box-list-item" v-for= ...
- Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- angular的路由跳转,的监听$rootScope.$on
使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...
- angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)
昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...
- 【Angular专题】——(2)【译】Angular中的ForwardRef
原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者:Christoph ...
- [Angular] Fetch non-JSON data by specifying HttpClient responseType in Angular
By default the new Angular Http client (introduced in v4.3.1) uses JSON as the data format for commu ...
- [Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation User input validation is a core part of creating proper HT ...
- [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
Measuring is extremely important, without numbers we don’t know about potential problems and we don’ ...
随机推荐
- Github 持续化集成 工作流 Npm包自动化发布
Github 持续化集成 工作流 Npm包自动化发布 简介 持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...
- js中对时间的操作
我们先来看一下如何获取当前时间: var date = new Date() //输出:Tue Jul 02 2019 10:36:22 GMT+0800 (中国标准时间) 紧接着,我们来获取相关参数 ...
- SpringBoot起飞系列-日志使用(四)
一.SpringBoot中的日志组件 日志是一个系统中不可缺少的组件.在项目中,我们常用的日志组件有JUL.JCL.Jboss-logging.logback.log4j.log4j2.slf4j.. ...
- 软件测试的分类&软件测试生命周期
软件测试的分类: 按测试执行阶段:单元测试.集成测试.系统测试.验收测试.(正式验收测试,Alpha 测试-内侧,Beta 测试-公测) 按测试技术分类:黑盒测试.白盒测试.灰盒测试 按测试对象是否运 ...
- python打开文件查询字符串时报UnicodeDecodeError: 'gbk' codec can't decode byte 0xaa in position 19: illegal multibyte sequence错误
当这样打开时报错了 lines = open(path).readlines() open(path).close() for line in lines: idx1 = line.find('检测到 ...
- Spring MVC-从零开始-如何访问静态资源
转(Spring MVC静态资源处理) 优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置Dis ...
- leveldb 源码--总体架构分析
一 本文目的 对leveldb的总体设计框架分析(关于leveldb基本原理,此文不做阐述,读者可以自行检索文章阅读即可),对leveldb中底层数据存储数据格式,内存数据模型,compact,版本管 ...
- tomcat设置指定jdk版本
windows 1.解压下载的tomcat; 2.找到bin下的setclasspath.bat文件:在文件的开始出添加如下代码来设定JAVA_HOME和JRE_HOME的路径: set JAVA_H ...
- 阿里云服务器CentOS6.9安装Ant
下载地址:http://mirrors.hust.edu.cn/apache/ant/binaries/ 1.下载 2.上传到服务器(非root用户下) 3.解压移动目录(root用户下) tar - ...
- groupadd、groupmod、groupdel、gpasswd、newgrp
1.groupadd [选项] 参数 添加组 -g:指定组ID -r:添加系统组 2.groupmod 修改组属性 -g :修改组ID -n:修改组名 3.groupdel 删除组 4.gpasswd ...