Я борюсь с 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, чтобы продемонстрировать проблему: