javascript - ניתוב ילד להורה לא עובד כאשר מנווטים ב-Angular

אני משתמש ב-angular 5.1.0, ויש לי בעיה עם מערכת הניווט, תן לי להסביר:

במודול ניתוב האפליקציה שלי יש לי URL /api שמטעין במצב עצל מודול אחר, במודול זה שנטען במצב עצל יש לי את מימוש הניתוב הבא:

מודול-נתיבי-API.ts

const routes: Routes = [
  {
    path: '',
    component: ApisComponent,
    data: {
      breadcrumbs: 'APIs',
    },
    children: [
      {
        path: '',
        component: ApiListComponent,
      },
      {
        path: ':id',
        component: ApiDetailComponent,
        resolve: {
          api: ApiResolverService
        },
        data: {
          breadcrumbs: '{{ api.title }}',
        },
      },
    ],
  },
];

הדבר החשוב כאן הוא הפרמטר data שהנתב מקבל.

ביישום שלי יש התנהגות שגיאה כללית שכאשר נזרקת חריגה יש לי מחלקת מנהל שגיאות שתופסת את השגיאה ומפנה ל-URL אחר: /error, זהו קוד המנהל:

import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    routerService.navigateByUrl('/error', { skipLocationChange: true });
  }
}

הבעיה היא, כאשר נזרקת חריגה בתוך /api ו-handleError מופעל, אני רואה את דף השגיאה הכללי שלי מוצג עם הפירור (breadcrumb) שנטען בנתיב האחרון: /api על ידי הפרמטר data.

האם יש דרך להגדיר את הנתב לאתחל נתונים כאשר הוא נטען? או שאולי אני עושה משהו לא נכון?

עדכון

בנקודה זו חשבתי שהבעיה נובעת מהפרמטר data, אבל עכשיו אני רואה שזה לא הבעיה. בואו אראה את error.component שלי שמתבצע כאשר ה-Router טוען את /error:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-error',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.scss']
})
export class ErrorComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    console.log('snapshot trace');
    console.log(this.route.snapshot);
  }
}

כללתי במתודה onInit של הרכיב, מעקב של ActivatedRoute snapshot כדי לראות מה יש בו, והעניין הוא שהמעקב הזה לא מופיע כאשר errorHandler מנווט מ-/api ל-/error.

אבל אם אני טוען ישירות /error המעקב מוצג, אז מכל סיבה שהרכיב של השגיאה לא משוכל בצורה נכונה בתרחיש הראשון (ניווט מ-/api ל-/error)

עדכון שדרגתי ל-angular 5.2.9 והבעיה עדיין מתרחשת.

תשובה #1

פתרתי את הבעיה באמצעות NgZone, אני חושב שבעיה ב״תזמון״ של ניתוב ש-angular יש כוללת את רכיב שגיאת הרינדור מחוץ לאזור של angular, אז, המחלקה AppErrorHandler נראית כך:

import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class AppErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: any): void {
    const routerService = this.injector.get(Router);
    const ngZone = this.injector.get(NgZone);
    ngZone.run(() => {
      routerService.navigate(['/error'], { skipLocationChange: true });
    });
  }
}

זוהי בעיה בגיטהאב הקשורה לבעיה שלי