Ich habe Probleme mit dem Angular-Framework, damit meine Anwendung reibungslos läuft, aber ich kann ein Problem mit dem Routing nicht lösen. Ich habe eine oberste Ebene AppComponent
und app-routing.module.ts
, die die Navigation über meine benutzerdefinierte SlideMenuComponent
verwalten. Meine vereinfachte HTML-Vorlage von AppComponent
:
<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>
Meine SlideMenuComponent
hat den folgenden HTML-Code als Kern:
<nav><div *ngFor="let button of buttons">
<a routerLink="{{button.routerLink}}"
>{{button.name}}</a>
</div></nav>
Ein Benutzer kann über dieses Folienmenü zu '/courses'
navigieren, das von CoursesComponent
überwacht wird, das Links zu einer bestimmten CourseComponent
s paginiert, die vom Server abgerufen werden. Diese Komponenten befinden sich in einem eigenen courses.module.ts
-Modul mit ihrem eigenen courses-routing.module.ts
. Wenn ich jedoch auf einen dieser Links klicke, erhalte ich Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
console warning, ngOnInit()
wird nicht für CourseCompontent
aufgerufen, und es wird nicht aktualisiert, bis ich auf eine der Schaltflächen auf der Seite klicke. Ich hatte dieses Problem beim manuellen Navigieren über router.navigate()
, das durch Weiterleiten dieser Aufgabe an NgZone.runTask(router.navigate())
behoben wurde. Warum passiert dies jedoch mit anchor
-Tags und routerLink
-Verzeichnissen? Hier ist mein CoursesComponent
-Code-Auszug:
<nav><ul>
<li *ngFor="let course of api.data | paginate: {
currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
}">
<a
[routerLink]="course._id"
[queryParams]="{ page: '1', limit: '5' }"
>
{{course.name}} ({{course.description}})
</a>
</li>
</ul></nav>
Ein GIF, um das Problem zu demonstrieren:
Es sieht nach einem Fehler aus, versuchen Sie dies als Problemumgehung
constructor(private ngZone: NgZone, private router: Router) {}
public navigate(commands: any[]): void {
this.ngZone.run(() => this.router.navigate(commands)).then();
}
Wir waren auf diesen Fehler gestoßen, als wir uns irgendwo in unserer Lösung befanden.
In unserer Sidebar-Komponente verwenden wir die On-Push-Änderungserkennung, und es gab eine this.ref.detectChanges()
beim Routing (Änderung der Parameter), die das Routing brach (evtl. parallel laufende Resolver aus der NgZone oder etwas Ähnlichem kickend) zu dem ohnehin bevorzugten this.ref.markForCheck()
erschien dieser Fehler nicht mehr..__ Ich bin froh, dass wir keinen Workaround brauchten, komisches Verhalten ...
Ich hoffe, das hilft jedem, der das gleiche Problem hat.