web-dev-qa-db-fra.com

Avertissement de directive angulaire 7 routerLink 'Navigation déclenchée en dehors de la zone angulaire'

Je me bats avec le framework Angular pour que mon application fonctionne correctement, mais je ne peux pas résoudre un problème de routage. J'ai une AppComponent et un app-routing.module.ts de niveau supérieur qui gèrent la navigation via ma SlideMenuComponent personnalisée. Mon modèle HTML simplifié de AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

Ma SlideMenuComponent a le code HTML suivant comme noyau:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

Un utilisateur peut accéder à '/courses' par le biais de ce menu de diapositives, supervisé par CoursesComponent qui pagine les liens vers une CourseComponents particulière extraite du serveur. Ces composants résident dans leur propre module courses.module.ts avec leur propre courses-routing.module.ts. Mais lorsque je clique sur l'un de ces liens, la console Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? apparaît, ngOnInit() n'est pas appelé pour ouvrir CourseCompontent, et il ne se met pas à jour tant que je n'ai cliqué sur aucun des boutons de la page. J'avais ce problème lorsque je naviguais manuellement via router.navigate() qui a été résolu en transmettant cette tâche à NgZone.runTask(router.navigate()), mais pourquoi cela se produit-il avec les balises anchor et les direcrives routerLink? Voici mon extrait de code CoursesComponent:

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

Un gif pour démontrer le problème:

 enter image description here

angularangular-routingangular-routerangular7angular-routerlink
4
Veetaha

Il voit un bug, essayez ceci comme solution de contournement

constructor(private ngZone: NgZone, private router: Router) {}

public navigate(commands: any[]): void {
    this.ngZone.run(() => this.router.navigate(commands)).then();
}
6
calebeaires

Nous avions rencontré ce bogue lorsque nous naviguions quelque part dans notre solution.

Dans notre composant de barre latérale, nous utilisons la détection de changement on-Push et nous avons eu un this.ref.detectChanges() lors du routage (changement de paramètres), ce qui a brisé le routage (éventuellement en lançant des résolveurs parallèles hors de ngZone ou similaire) .. this.ref.markForCheck() ce bogue n'est plus apparu ..__ Je suis heureux que nous n'ayons pas besoin d'une solution de contournement, mais d'un comportement étrange ..

J'espère que cela aide tous ceux qui ont le même problème.

0
fberthel