如何在Angular中使用 "magnific-popup"？

Question

我在这里几乎成功地实现了Magnific弹出窗口。https:/github.comorchidea90Popuphttps:/orchidea90.github.ioPopup。但我需要一个关于我的.ts文件的帮助。如何使它更简单，没有这么多的重复。

https:/github.comorchidea90Popupblobmastersrcappmenumenu.component.ts。

我还在学习。先谢谢你了。

Answer 1

你可以做的一件事是创建一个数组的项目数据，然后在你的模板中使用ngFor来显示wach项目。

因此，在你的.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将为数组中的每一个项目创建一个。

              <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>