如何在 Angular 中使用“magnific-popup”答案

【问题标题】：How to use 'magnific-popup' with Angular如何在 Angular 中使用“magnific-popup”
【发布时间】：2020-04-24 18:07:58
【问题描述】：

我在这里几乎成功地实现了 Magnific 弹出窗口： https://github.com/orchidea90/Popup https://orchidea90.github.io/Popup/, 但我的 .ts 文件需要帮助。如何让它更简单，没有那么多重复。

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

我还在学习。提前致谢。

【问题讨论】：

标签： angular magnific-popup

【解决方案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 将为数组的每个项目创建 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>

【讨论】：