javascript - how - Uso de complementos JQuery en aplicaciones angulares 4

jquery angular 4

Question

Por lo tanto, actualmente estoy tratando de usar algunos complementos de jquery como Magnific-Popup, etc. en mi aplicación Angular 4, pero estoy teniendo algunos problemas. Instalé jquery haciendo la npm install --save-dev @types/jquery en mi terminal y funcionó bien, pero tengo problemas para conseguir que los complementos reales funcionen. Esto es lo que intenté inicialmente,

 @Component({
selector: ''app-showcase'',
templateUrl: ''./showcase.component.html'',
styleUrls: [''./showcase.component.css'']
})
export class ShowcaseComponent implements OnInit {
@ViewChild("elementRef") elref2: ElementRef;
constructor(private elRef: ElementRef) { }
ngOnInit() {
jQuery(this.elref2.nativeElement).magnificPopup();
}
ngAfterViewInit() {
}

Para que mecanografiado reconozca la función magnificPopup (), traté de importar las secuencias de comandos de la documentación de magnificPopup en mi index.html (en la parte inferior de la etiqueta del cuerpo), pero hasta donde sé, eso no funciona. Webstorm dice "no se puede resolver el archivo jquery.magnific-popup.js". También estoy cargando el script jquery.min, y parece funcionar bien.

También intenté ejecutar npm-install magnific-popup, pero eso también falló. Además, traté de agregar la secuencia de comandos en el archivo angular.JSON, pero fue en vano.

Supongo que lo que estoy preguntando es, ¿qué es y cómo puedo instalar y utilizar un plugin jquery de terceros como magnific-pop up en mi aplicación angular 4?

Gracias, cualquier ayuda es apreciada.

Answer 1

Tengo un proyecto angular donde necesito usar (por ahora) un plugin dependiente de jquery (nanoescritura). Yo uso angular-cli para hacer todos mis procesos de compilación y mi archivo angular-cli.json tiene lo siguiente bajo la propiedad "scripts":

 "scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/nanoscroller/bin/javascripts/jquery.nanoscroller.js"
]

Luego utilizo el complemento de la siguiente manera:

import { AfterViewInit, Component, ElementRef, OnDestroy, Renderer, ViewChild } from "@angular/core";
declare var jQuery: any;
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
layoutMenuScroller: HTMLDivElement;
@ViewChild("layoutMenuScroller") layoutMenuScrollerViewChild: ElementRef;
constructor() {
}
ngAfterViewInit() {
this.layoutMenuScroller = <HTMLDivElement>this.layoutMenuScrollerViewChild.nativeElement;
jQuery(this.layoutMenuScroller).nanoScroller({ flash: true });
}
// etc..
}

Tal vez puedas adoptar esto para tu caso de uso.