Angular 6 - Проблемы при навигации по одной и той же странице из розетки маршрутизатора - PullRequest
Новая
       19

Angular 6 - Проблемы при навигации по одной и той же странице из розетки маршрутизатора

0 голосов
/ 26 января 2019

Запутывает, верно? Да, это портит мне голову.

Я использую Angular 6.0.3, и у меня есть верхняя панель навигации с панелью поиска. Служба searchService содержит только переменную searchQuery.

app.component.html 

 <app-topbar [(menuOpened)]="opened"></app-topbar>

 <router-outlet *ngIf="!searchService.searchQuery"></router-outlet>

Когда пользователь вводит что-либо в строку поиска, выход маршрутизатора исчезает, и в конце страницы отображается search results component (в app.component.html, вне router-outlet), как в этом разделе:

topbar.component.html 

<app-search [(searchString)]="searchString" *ngIf="searchService.searchQuery"></app-search>

Так что это появится. Мы почти там. На этой странице есть ряд компонентов списка, в которых отображаются карточки, на которые можно нажимать. Давайте сосредоточимся на одном из них.

продукт-list.component.html 

<div class="product-list">
    <div (click)="goToProduct(item)" *ngFor="let item of items; let i = index" class="prod-card col-6 col-lg-2">
        <app-product-card *ngIf="item.serial" [product]="item" [number]="item.serial"></app-product-card>
        <app-product-card *ngIf="!item.serial" [product]="item" [number]="i+1"></app-band-card>
    </div>
</div>

Этот ребенок работает просто отлично, и клик делает следующее:

продакт-list.component.ts 

 goToProduct(obj: Product) {
    this.router.navigate(["/products", obj.link]);
  }

Так что да, маршрутизатор создается в конструкторе, все хорошо. Это работает. Давайте будем здесь ясны. Это работает просто отлично, но в одном особом состоянии это не так.

Когда я нахожусь на странице продукта, скажем, /products/1156, показывая данные продукта с идентификатором 1156, и я пишу в строке поиска ключевое слово, компонент поиска покажет мне список продуктов, категорий и другие элементы в качестве альтернативы для результатов поиска. Если я удаляю карту любого другого списка (скажем, я нажимаю на category: Perfect! Работает как задумано. НО, если я на странице продукта, найдите ключевое слово и нажмите на имя product's, вызывая таким образом goToProduct() метод, описанный выше, я получаю следующую ошибку: 

** ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null **
    at PreActivation.push../node_modules/@angular/router/fesm5/router.js.PreActivation.setupRouteGuards (router.js:2698)
    at router.js:2653
    at Array.forEach (<anonymous>)
    at PreActivation.push../node_modules/@angular/router/fesm5/router.js.PreActivation.setupChildRouteGuards (router.js:2652)
    at PreActivation.push../node_modules/@angular/router/fesm5/router.js.PreActivation.initialize (router.js:2617)
    at MapSubscriber.project (router.js:3999)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:79)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Это заставляет меня думать, что у моего app router есть проблема, верно? Когда он пытается получить дочерний компонент моей страницы продуктов или что-то, что в настоящее время имеет значение null ... router.navigate попытается перейти к дочернему компоненту здесь? Да, но опять же, почему это происходит только тогда, когда компонент уже загружен? это проблема onSameURLNavigation или что-то подобное?

Имейте в виду, что я использую @angular/router version 6.0.3, поэтому в дополнительных параметрах маршрутов нет onSameUrlNavigation: 'reload' (не решит ли это мою проблему, хотя? Обновление всего приложения теперь будет проблематичным, но если оно решит его ... я бы сделал это)

И наконец, что не менее важно, мои маршруты довольно хороши, как в: 

const routes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'login', component: LoginComponent },
  { path: 'about', component: AboutComponent },
  { path: 'me', component: MyPageComponent },
  { path: 'my-profile', component: MyProfileComponent },
  { path: 'forgot', component: ForgotPasswordComponent },
  { path: 'categories', component: CategoryComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id/:slug', component: ProductsComponent },
  ..........
  { path: '**', component: ErrorNotFoundComponent },

];

Так что я не знаю, где я мог пойти не так. Ребята, пожалуйста, помогите?

Заранее большое спасибо !!

- РЕДАКТИРОВАТЬ

TL; DR

Моя навигация не работает в очень специфической ситуации: когда я пытаюсь перейти со страницы a/:id1 на ту же страницу a, но a/:id2 И я запускаю router.navigate() с компонента, который находится за пределами <router-outlet> tag: мой раздел результатов поиска в верхней панели навигации. Кроме этой конкретной ситуации, он работает нормально ...

...