wake-up-neo.com

Angular 7-RouterLink-Direktive "Navigation außerhalb der Winkelzone ausgelöst"

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 CourseComponents 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:

 enter image description here

angularangular-routingangular-routerangular7angular-routerlink
4
Veetaha

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();
}
6
calebeaires

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.

0
fberthel