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() 的问题修复的更多相关文章

  1. vue 二级子路由跳转不了 bug

    vue 二级子路由跳转不了 bug @click.prevent 阻止原生事件的冒泡 <li class="tools-hover-box-list-item" v-for= ...

  2. Angular 1 深度解析:脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  3. angular中路由跳转并传值四种方式

    一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...

  4. angular的路由跳转,的监听$rootScope.$on

    使用angular来做项目时,习惯性的使用第三方路由插件ui-router配置路由.每一个状态都对应着一个页面, 因此对路由状态改变的监听也变的十分重要. 可以使用:$rootScope.$on(…… ...

  5. angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)

    昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...

  6. 【Angular专题】——(2)【译】Angular中的ForwardRef

    原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者:Christoph ...

  7. [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 ...

  8. [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 ...

  9. [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’ ...

随机推荐

  1. Github 持续化集成 工作流 Npm包自动化发布

    Github 持续化集成 工作流 Npm包自动化发布 简介   持续集成指的是,频繁地(一天多次)将代码集成到主干. 它的好处主要有两个: 快速发现错误.每完成一点更新,就集成到主干,可以快速发现错误 ...

  2. js中对时间的操作

    我们先来看一下如何获取当前时间: var date = new Date() //输出:Tue Jul 02 2019 10:36:22 GMT+0800 (中国标准时间) 紧接着,我们来获取相关参数 ...

  3. SpringBoot起飞系列-日志使用(四)

    一.SpringBoot中的日志组件 日志是一个系统中不可缺少的组件.在项目中,我们常用的日志组件有JUL.JCL.Jboss-logging.logback.log4j.log4j2.slf4j.. ...

  4. 软件测试的分类&软件测试生命周期

    软件测试的分类: 按测试执行阶段:单元测试.集成测试.系统测试.验收测试.(正式验收测试,Alpha 测试-内侧,Beta 测试-公测) 按测试技术分类:黑盒测试.白盒测试.灰盒测试 按测试对象是否运 ...

  5. 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('检测到 ...

  6. Spring MVC-从零开始-如何访问静态资源

    转(Spring MVC静态资源处理)   优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置Dis ...

  7. leveldb 源码--总体架构分析

    一 本文目的 对leveldb的总体设计框架分析(关于leveldb基本原理,此文不做阐述,读者可以自行检索文章阅读即可),对leveldb中底层数据存储数据格式,内存数据模型,compact,版本管 ...

  8. tomcat设置指定jdk版本

    windows 1.解压下载的tomcat; 2.找到bin下的setclasspath.bat文件:在文件的开始出添加如下代码来设定JAVA_HOME和JRE_HOME的路径: set JAVA_H ...

  9. 阿里云服务器CentOS6.9安装Ant

    下载地址:http://mirrors.hust.edu.cn/apache/ant/binaries/ 1.下载 2.上传到服务器(非root用户下) 3.解压移动目录(root用户下) tar - ...

  10. groupadd、groupmod、groupdel、gpasswd、newgrp

    1.groupadd [选项] 参数 添加组 -g:指定组ID -r:添加系统组 2.groupmod 修改组属性 -g :修改组ID -n:修改组名 3.groupdel 删除组 4.gpasswd ...