Angular 7 предупреждение директивы routerLink «Навигация сработала за пределами угловой зоны» - PullRequest
Новая
       28

Angular 7 предупреждение директивы routerLink «Навигация сработала за пределами угловой зоны»

0 голосов
/ 03 ноября 2018

Я борюсь с Angular Framework, чтобы мое приложение работало гладко, но я не могу решить проблему с маршрутизацией. У меня есть верхний уровень AppComponent и app-routing.module.ts, который управляет навигацией через мой пользовательский SlideMenuComponent. Мой упрощенный HTML-шаблон AppComponent: 

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

My SlideMenuComponent имеет следующий html в качестве ядра: 

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

Пользователь может перейти к '/courses' через это слайд-меню, которое контролируется CoursesComponent, который разбивает на страницы ссылки на определенные CourseComponent s, которые извлекаются с сервера. Эти компоненты находятся в своем собственном модуле courses.module.ts со своим собственным courses-routing.module.ts. Но когда я нажимаю на любую из этих ссылок, я получаю Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? предупреждение консоли, ngOnInit() не вызывается для открытого CourseCompontent, и оно не обновляется, пока я не нажму ни одну из кнопок на странице. У меня была эта проблема при ручной навигации по router.navigate(), которая была решена путем пересылки этой задачи в NgZone.runTask(router.navigate()), но почему это происходит с тегами anchor и директивами routerLink? Вот мой 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>

GIF, чтобы продемонстрировать проблему:

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Мы столкнулись с этой ошибкой, когда находились где-то в нашем решении.

В нашем компоненте боковой панели мы используем обнаружение изменений по нажатию, и у нас был один this.ref.detectChanges(), когда произошла маршрутизация (изменение параметров), что каким-то образом нарушило маршрутизацию (возможно, выбив параллельные работающие преобразователи из ngZone или чего-то подобного). После изменения этого значения в любом случае на this.ref.markForCheck() эта ошибка больше не появлялась. Я рад, что нам не нужен обходной путь, хотя странное поведение ..

Надеюсь, это поможет любому, у кого возникла такая же проблема.

0 голосов
/ 08 ноября 2018

Он видит ошибку, попробуйте это как обходной путь 

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

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