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 路由需要我們持續的去審閱，多嘗試，多閱讀，必然了然於心。