Как использовать 'magnifi c -popup' с Angular - PullRequest
Новая
       25

Как использовать 'magnifi c -popup' с Angular

0 голосов
/ 24 апреля 2020

Я почти успешно реализовал всплывающее окно Magnifi c: https://github.com/orchidea90/Popup https://orchidea90.github.io/Popup/, но мне нужна помощь с моим файлом .ts. Как сделать это проще и без такого количества повторений.

https://github.com/orchidea90/Popup/blob/master/src/app/menu/menu.component.ts

Я все еще учусь. Заранее спасибо.

1 Ответ

0 голосов
/ 24 апреля 2020

Одна вещь, которую вы можете сделать, это создать массив с данными об элементах, а затем в вашем шаблоне использовать ngFor для отображения каждого элемента.

Итак, в ваших .ts вы создаете массив (в OnInit).

Я также создал переменную (imageFolderPath) для хранения общего пути для всех изображений. 

ngOnInit() {

    this.imageFolderPath = './assets/images/';

    this.aMenuItems = [
        { imagePath: 'menu-image1.png', title: 'American Breakfast', ingredients: 'Tomato / Eggs / Sausage', price: 25 },
        { imagePath: 'menu-image2.png', title: 'Self-made Salad', ingredients: 'Green / Fruits / Healthy', price: 18 },
        { imagePath: 'menu-image3.jpg', title: 'Chinese Noodle', ingredients: 'Pepper / Chicken / Vegetables', price: 34 },
        { imagePath: 'menu-image4.png', title: 'Rice Soup', ingredients: 'Green / Chicken', price: 28 },
        { imagePath: 'menu-image5.png', title: 'Deli Burger', ingredients: 'Beef / Fried Potatoes', price: 46 },
        { imagePath: 'menu-image6.png', title: 'Big Flat Fried', ingredients: 'Pepper / Crispy', price: 30 },
    ]
}

в вашем html, вы используете только один блок для определения html, * ngFor создаст 1 для каждого элемента массива. 

              <div class="col-md-4 col-sm-6" *ngFor="let item of aMenuItems">
               <!-- MENU THUMB -->
               <div class="menu-thumb">
                    <a [href]="imageFolderPath + item.imagePath" class="image-popup" title="item.title">
                         <img [src]="imageFolderPath + item.imagePath" class="img-responsive" alt="item.title">

                         <div class="menu-info">
                              <div class="menu-item">
                                   <h3>{{item.title}}</h3>
                                   <p>{{item.ingredients}}</p>
                              </div>
                              <div class="menu-price">
                                   <span>${{item.price}}</span>
                              </div>
                         </div>
                    </a>
               </div>
          </div>
...