Angular 7 - повторно использовать компонент для отображения отфильтрованных коллекций - PullRequest
Новая
       22

Angular 7 - повторно использовать компонент для отображения отфильтрованных коллекций

0 голосов
/ 15 апреля 2019

Я пытаюсь разработать проект веб-приложения на основе Angular7 (онлайн-ресторан с доставкой еды) с базой данных MySQL. Приложение использует маршрутизатор для навигации и загрузки компонентов на сайте.

во-первых, важная (затронутая) часть app-routing.module:

приложение-routing.module.ts 

[...]  
{
path: 'menu',
component: MenuComponent,
children: [
  {
    path: '',
    redirectTo: 'categories',
    pathMatch: 'prefix'
  },
  {
    path: 'categories',
    component: ProductCategoriesComponent,
    resolve: {
      productCategories: CategoriesResolver,
      products: ProductsResolve
    },
  },
  {
    path: 'categories/:id',
    component: ProductsByCategoryComponent,
    resolve: {
      productsByCategory: ProductsResolveByCategory,
      productCategories: CategoriesResolver
    }
  },
  {
    path: '**',
    redirectTo: 'categories',
    pathMatch: 'prefix'
  }
],
  },
[...]

** Сценарий использования выглядит следующим образом: I. Пользователь нажимает навигационную ссылку «Меню» на панели навигации - загружается компонент меню: URL-адрес после действия: localhost: 4200 / меню / категории / **

меню component.html 

<router-outlet></router-outlet>

это просто заполнитель для загрузки категорий товаров, предлагаемых меню - Angular перенаправляет пользователя в меню / категории и загружает ProductCategoriesComponent. Этот использует два средства распознавания - для фактического разрешения всех категорий продуктов и всех продуктов (все они загружены, поскольку не выбрана конкретная категория).

Идентификаторы категорий: 1 - закуски 2 - пицца 3 - паста 4 - напитки 5 - десерты

** II. После того, как пользователь выбирает определенную категорию, весь список фильтруется, и бэкэнд возвращает новый список объектов с запрошенным categoryId: **

product.resolve.ts 

@Injectable()
export class ProductsResolveByCategory implements Resolve<any> {

  constructor(private productService: ProductService) {
  }

  resolve(route: ActivatedRouteSnapshot) {
    return this.productService.getProductsByCategoryId(route.params['id']);
  }
}

маршрутизация приводит нас, например, к: localhost: 4200 / menu / category / 1, когда выбрана категория "закусок".

Пока приложение работало так хорошо, но появилась проблема с отображением контента при определенных условиях - когда пользователь находится в / menu / category / 1 и хочет выбрать другую категорию (например, изменить с 1 на 2), представление не обновляется сам по себе - не загружаются продукты с другим идентификатором категории, мы все еще можем увидеть старые - на данный момент обходной путь состоит в том, чтобы снова нажать кнопку меню, а затем нужную категорию. Более того, нажатие кнопки «назад» в браузере (поэтому он должен вернуться в меню / категории /) приводит к ошибочному запросу (ошибка 400), поскольку веб-интерфейс отправляет запрос с / menu / category / category (double!) Вместо «id». Я не могу найти логического объяснения, почему слово «id» заменяется словом «category»:

products.service.ts 

  public getProductsByCategoryId(id: number): Observable<Array<ProductModel>> {
   return this.http.get('/api/products/categories/' + id).pipe(map((response: Array<ProductModel>) => {
   this.productsByCategory = response;
   return this.productsByCategory;
 }));
}

продукты, по-category.component.ts 

 Component({
  selector: 'app-products-by-category',
  templateUrl: './products-by-category.component.html',
  styleUrls: ['./../products/products.component.css'],
})
export class ProductsByCategoryComponent implements OnInit {
  private productsByCategory: Array<ProductModel> = [];

  constructor(private productService: ProductService,
              private route: ActivatedRoute) {
  }

   ngOnInit() {
     if (this.route.snapshot.data['productsByCategory']) {
       this.productsByCategory = this.route.snapshot.data['productsByCategory'];
     }
   }
}

Итак, подведем итог: есть две (скорее всего, глупые ошибки в логике):

  1. Почему при переходе от меню / категорий / 1 к меню / категориям / 2 нужные элементы не загружаются,
  2. Почему при переходе назад к / menu / category / внешний интерфейс отправляет / menu / Categories / Categories / вместо / menu / Categories / - в качестве переменной 'id', он посылает слово 'category' ... (это проблема возникает также, когда пользователь удаляет / 1 с конца ссылки в браузере)

Любая помощь будет оценена. Спасибо!

1 Ответ

1 голос
/ 15 апреля 2019

для использования обновлений в вашем компоненте вы должны подписаться на данные, а не получать к ним доступ через снимок. Вместо this.route.snapshot.data['productsByCategory'] используйте this.route.data.subscribe((data) => { this.productsByCategory = data['productsByCategory'];}). чтобы устранить вторую проблему, удалите path: '' config из конфигурации маршрутизатора. Я думаю, что этого будет достаточно, так как path: '**' config уже обрабатывает этот случай.

...