Question

我找不到任何角度的巨大弹出窗口问题是magnificPopup无法被jquery识别

为了比较，我使用jquery-confirm并且它有效。这个过程和magnific popup一样，唯一不同的是调用方法> df A1 A2 A3 B1 B2 B3 1 3 4 3 1 0 1 2 5 6 6 0 0 1 3 4 5 4 2 2 0 4 4 7 3 1 0 1

角cli.json

$.confirm({jquery-confirm stuff})

的package.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",
...

TS

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

Answer 1

为了实现这一点，我采用了以下步骤：

我使用cli 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"

我还通过将{{1}}添加到样式数组来更新{{1}}文件以包含其css文件。

GitHub repo包含完整代码。

Answer 2

谢谢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' });
         }
 
    }  
}

Answer 3

你可以试试这个：

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

否则，将其导入index.html。

Angular 2+ TypeError：$（...）。magnificPopup不是函数

3 个答案: