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 路由须要咱们持续的去审阅，多尝试，多阅读，必然了然于心。