角2+ TypeError：$(.).magnificPopup不是函数

Question

我在角中找不到万能弹出的任何地方，问题是jquery不能识别magnificPopup

作为比较，我使用了jquery-确认，它可以工作。进程是相同的，就像Magni显弹出，唯一不同的是调用方法，即$.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",
...

Ts

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

        },2000)

Answer 1

为了使它工作起来，我使用了以下步骤：

我用运行npm install --save jquery magnific-popup的cli 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回购。

Answer 2

你可以试试这个：

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

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

Answer 3

谢谢你的开发！然而，对我来说，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' });
         }
 
    }  
}

​