Angular 2+ TypeError: $(...).magnificPopup 不是函数答案

【问题标题】：Angular 2+ TypeError: $(...).magnificPopup is not a functionAngular 2+ TypeError: $(...).magnificPopup 不是函数
【发布时间】：2018-03-23 12:51:13
【问题描述】：

我在任何地方都找不到 Angular 中的放大弹出窗口问题是 magnificPopup 无法被 jquery 识别

为了比较，我使用了 jquery-confirm，它可以工作。该过程与magnific popup相同，唯一不同的是调用方法为$.confirm({jquery-confirm stuff})

angular-cli.json

...    
"scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/magnific-popup/dist/jquery.magnific-popup.min.js",
            "../node_modules/bootstrap/dist/js/bootstrap.js",
...

package.json

...
  "googleapis": "19.0.0",
    "jquery": "3.2.1",
    "jquery-confirm": "^3.3.2",
    "magnific-popup": "^1.1.0",
    "moment": "2.18.1",
...

import * as $ from "jquery";
...
setTimeout(()=>{
            $(document).ready(function($){
                alert();
                $('.popupImage').magnificPopup({
                    type: 'image'
                    // other options
                    ,
                });
            });

        },2000)

【问题讨论】：

根据错误，似乎 jquery 已加载，但 magnific-popup 未加载。
没有。停在这里。不要同时使用 Angular 和 jQuery。曾经。 jQuery 不知道 Angular 在 DOM 中生成了什么，Angular 也不知道 jQuery 在做什么。使用 Angular 或 jQuery，不要同时使用。
@JeremyThille - 我不同意（在这种情况下）。这个特殊的tool 是一个打开图像的 UI 工具，它依赖于 jquery。我看不出这有什么问题。如果问题是关于 DOM 或数据操作的，我会同意你的看法。
评论你的代码：不要使用$(document).ready(，而是使用角度Lifecycle Hooks。
real world developing 你以为我整天都在做什么？针织？好吧，好吧，继续加载两个不知道对方在做什么的库，祝你好运:)

标签： jquery angular magnific-popup

【解决方案1】：

为了让它发挥作用，我采用了以下步骤：

我使用 cli ng new ng-magnific-popup 创建了一个新项目我跑了npm install --save jquery magnific-popup 我将app.component.html 更新为

`<a #img href="assets/BingWallpaper-2018-03-23.jpg">img</a>`

我将app.component.ts 更新为

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import * as $ from 'jquery';
import 'magnific-popup';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('img') imgElement: ElementRef;

  ngAfterViewInit(): void {
    $(this.imgElement.nativeElement).magnificPopup({ type: 'image' });
  }
}

我还更新了 .angular-cli.json 文件，通过将 "../node_modules/magnific-popup/dist/magnific-popup.css" 添加到样式数组来包含他们的 css 文件。

GitHub repo 带有完整代码。

【讨论】：

我会将其标记为解决方案，因为它回答了问题。使用本机元素是答案：D 但是对每个 img 使用 viewchild 而不是使用类选择器是不切实际的。如果 img 标签是动态的怎么办？ IE。画廊照片。仅供参考，我现在改用fancybox ..它有npm，搜索fancybox npm ..并没有任何问题。它的好

【解决方案2】：

你可以试试这个：

import $ from "jquery";
import 'magnificPopup'; // <=== if it exist into your node_module folder

否则，将其导入您的 index.html。

【讨论】：

【解决方案3】：

感谢 peinearydevelopment！但是对我来说 AfterViewChecked 工作，由于某种原因 AfterViewInit 没有。

import { Component, OnInit, AfterViewChecked  } from '@angular/core';
import * as $ from 'jquery';
import 'magnific-popup';


@Component({templateUrl: 'home.component.html'})
export class HomeComponent implements AfterViewChecked   {
    @ViewChild('img')   imgElement:ElementRef; 
    @ViewChild('video') videoElement:ElementRef; 

    ngAfterViewChecked (): void {
   
        if (this.imgElement) {
           $(this.imgElement.nativeElement).magnificPopup({ type: 'image' });
        }

        if (this.videoElement) {
            $(this.videoElement.nativeElement).magnificPopup({ type: 'iframe' });
         }
 
    }  
}

【讨论】：