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 路由需要我们持续的去审阅,多尝试,多阅读,必然了然于心。
原文地址:https://www.cnblogs.com/isylar/p/12982450.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下命令行cURL的10种常见用法示例
- Apache Web 服务器的安装配置方法
- Linux(Ubuntu 18.04)上安装Anaconda步骤详解
- seaborn关联图表之折线图和散点图
- Linux 系统下安装JDK1.8的教程详解
- Linux yum 命令安装mysql8.0的教程详解
- linux中叹号命令(!)的使用小结
- ubuntu下rz/sz命令的安装与使用说明
- Linux环境变量配置的完整攻略
- linux中使用boost.python调用c++动态库的方法
- linux下pip的安装步骤及使用详解
- CentOS7安装配置 Redis的方法步骤
- Linux下Oracle如何导入导出dmp文件详解
- Linux中samba服务器的搭建教程
- linux环境搭建图数据库neo4j的讲解