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. golang1.13中重要的新特新

    本文索引 语言变化 数字字面量 越界索引报错的完善 工具链改进 GOPROXY GOSUMDB GOPRIVATE 标准库的新功能 判断变量是否为0值 错误处理的革新 Unwrap Is As gol ...

  2. 【ADO.NET基础】后台获取前台控件

    C# 后台获取前台 input 文本框值.string aa=Request.Form[headself]; 那么要是后台给前台input文本框赋值呢? 后台 public string Headse ...

  3. ES6学习总结之Set和Map数据结构的理解

    前言 当我们需要存储一些数据的时候,首先想到的是定义一个变量用来存储,之后我们可能学了数组,发现数组比变量可以存储更多的数据,接着可能有其它的存储数据的方法等等,然而我今天需要介绍的是在ES6中比较常 ...

  4. 使用java的循环单向链表解决约瑟夫问题

    什么是约瑟夫问题 据说著名犹太历史学家 Josephus有过以下的故事:在罗马人占领乔塔帕特后,39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓到,于是决定 ...

  5. Python——Pandas速查手册中文版

    转自——http://blog.csdn.net/qq_33399185/article/details/60872853,非常感谢大神的整理! 还有图片版,转自——https://zhuanlan. ...

  6. 开发电商平台用PHP语言和JAVA语言有什么区别?哪种语言更好?

    现在很多行业都通过电子商务拓展业务,所以商城系统开发成为很多企业的刚性需求.一般有一点技术基础的客户应该知道目前商城系统开发主流语言有两个,PHP和Java.那么很多客户朋友会纠结是选择哪个语言开发好 ...

  7. 一文彻底理解Redis序列化协议,你也可以编写Redis客户端

    前提 最近学习Netty的时候想做一个基于Redis服务协议的编码解码模块,过程中顺便阅读了Redis服务序列化协议RESP,结合自己的理解对文档进行了翻译并且简单实现了RESP基于Java语言的解析 ...

  8. 一文搞定 SonarQube 接入 C#(.NET) 代码质量分析

    1. 前言 C#语言接入Sonar代码静态扫描相较于Java.Python来说,相对麻烦一些.Sonar检测C#代码时需要预先编译,而且C#代码必须用MSbuid进行编译,如果需要使用SonarQub ...

  9. ELK 学习笔记之 Logstash之output配置

    Logstash之output配置: 输出到file 配置conf: input{ file{ path => "/usr/local/logstash-5.6.1/bin/spark ...

  10. Kafka 学习笔记之 Consumer API

    Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API ...