标签：for log exp inject ons 修复 nts 方法 官方文档
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() 的问题修复
标签：for log exp inject ons 修复 nts 方法 官方文档
原文地址：https://www.cnblogs.com/jiagoushi/p/11770397.html
