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

Question

我找不到任何地方的角度弹出的角度问题是magnificPopup不被jquery识别

为了比较,我使用jquery-confirm,它的工作原理.这个过程和magnific popup一样,唯一不同的是调用方法$.confirm({jquery-confirm stuff})

角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

为了实现这一点,我使用了以下步骤:

我创建了一个新的项目与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完整代码.