Как показывать разные изображения при нажатии на предыдущей странице

Question

Я новичок в Angular. У меня 2 страницы, на 1-й странице отображается список значков основных категорий. Я хочу показать его значок подкатегорий на следующей странице в зависимости от выбранной основной категории. Пример: если я нажму «Еда», то на следующей странице => должен отобразиться значок подкатегорий «Еда», то же самое для салона, спа и т. Д. c. Ниже я прикрепляю свой код. Пожалуйста, предложите, что я могу сделать для этого.

dashboard.component. html

    <div class="productBlock">
                <div class="container" style="text-align:-webkit-center">
                    <div>
              <owl-carousel [options]="{items:5, dots:true, navigation:true}"
               [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/food.png" (click)="productListItemClick()" alt=""></div><span>Food</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/activities.png" (click)="productListItemClick()" alt=""></div><span>Activities</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/fitness.png" (click)="productListItemClick()" alt=""></div><span>Fitness</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/salon.png" (click)="productListItemClick()" alt=""></div><span>Salon</span></a>
                        <a class="product-single"><div><img  style="width: 60px; height: 60px;"  src="assets/images/spa.png" (click)="productListItemClick()" alt=""></div><span>Spa</span></a>
              </owl-carousel>
                    </div>
                </div>
            </div>

dashboard.component.ts

productListItemClick()
{
    this.router.navigate(['/deals']);
  }

Deals-list.component. html

<div class="productBlock">
            <div class="container" style="text-align:-webkit-center">
                <div *ngIf="food">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/cafes.png" alt=""></div><span>Cafes</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/desserts.png" alt=""></div><span>Desserts</span></a>
                   </owl-carousel>
                </div>

                <div *ngIf="spa">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/body.png" alt=""></div><span>Body</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/ayurvedic.png" alt=""></div><span>Ayurvedic</span></a>
                   </owl-carousel>
                </div>

                <div *ngIf="salon">
                    <owl-carousel [options]="{items:2, dots:true, navigation:true}"
                    [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                             <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/hair.png" alt=""></div><span>Hair Care</span></a>
                             <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/makeup.png" alt=""></div><span>Makeup</span></a>
                   </owl-carousel>
                </div>
            </div>
        </div>

Answer 1

Вы можете передать своей функции щелчка параметр с категорией

<div class="productBlock">
                <div class="container" style="text-align:-webkit-center">
                    <div>
              <owl-carousel [options]="{items:5, dots:true, navigation:true}"
               [carouselClasses]="['owl-theme', 'row', 'sliding','prev' , 'next']">

                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/food.png" (click)="productListItemClick('Food')" alt=""></div><span>Food</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/activities.png" (click)="productListItemClick('Activities')" alt=""></div><span>Activities</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"   src="assets/images/fitness.png" (click)="productListItemClick('Fitness')" alt=""></div><span>Fitness</span></a>
                        <a class="product-single"><div><img style="width: 60px; height: 60px;"  src="assets/images/salon.png" (click)="productListItemClick('Salon')" alt=""></div><span>Salon</span></a>
                        <a class="product-single"><div><img  style="width: 60px; height: 60px;"  src="assets/images/spa.png" (click)="productListItemClick('Spa')" alt=""></div><span>Spa</span></a>
              </owl-carousel>
                    </div>
                </div>
            </div>

Или лучше, если вы сделаете это через параметр URL.