Блог

В моем приложении Angular у меня есть компонент верхней навигации, в трех маршрутах я должен показывать корзину в этом компоненте, до сих пор я использовал сервис с BehaviourSubject, и когда я перемещался, как в маршруте продуктов, я устанавливал для него значение true, а затем в моей верхней навигации я проверялчто, если это правда, я должен был показать корзину.

Но теперь мне нужно найти другой подход, что-то внутри компонента top-nav, который определяет, нахожусь ли я в маршруте «продукты», чтобы показать корзину, иначе, если я нахожусь в маршруте «магазин», чтобы скрыть его, поскольку я использую маршрут повторного использования, и я не могу установить BehaviourSubject для навигации обратно в «продукты»

Какой был бы лучшим способом сделать следующее?

в конструкторе top-nav у меня есть следующее:

 cartService.isCartEnabled.subscribe((data) => (this.cart = data));
  

а затем в html я проверяю cart , показываю ли true я значок корзины.

Вы можете добавить атрибуты к своему маршруту, а затем охрану маршрута, чтобы установить атрибут для навигации.

Вот ссылка на angular docs о настройке атрибутов маршрута

Вы добавляете узел данных с некоторыми атрибутами к маршруту, на котором хотите отобразить корзину:

 ...
  {
    path: 'with-cart',
    component: YourComponent,
    data: { displayCar: true }
  },
  {
    path: 'without-cart',
    component: YourComponent,
  },
...
  

используя распознаватель (подробнее в angular docs), вы можете прочитать этот параметр данных и установить его в службе:

 @Injectable({
  providedIn: 'root',
})
export class CartResolverService implements Resolve<boolean> {
  constructor(private yourService: YourService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    this.yourService.setDisplayCart(route.data.displayCart)
    
    return of(route.data.displayCart === true);
  }
}

  

и снова перенастроите маршруты с помощью этого преобразователя:

   {
    path: 'with-cart',
    component: YourComponent,
    data: { displayCar: true },
    resolve: {
      cartResolver: CartResolverService,
    },
  },
  {
    path: 'without-cart',
    component: YourComponent,
    resolve: {
      cartResolver: CartResolverService,
    },
  },

  

И ваш nav должен быть подписан на эту службу, чтобы он мог вносить изменения.