Búsqueda de sitios web

javascript - Angular 4 jquery no funciona

Estoy tratando de usar jQuery en mi aplicación Angular 4. He seguido todos los pasos para instalar jQuery en mi Angular 4. Sin embargo, jQuery todavía no funciona. He puesto el código de jQuery en el componente de esta manera.

home.component.ts

import * as jQuery from 'jquery'
import { Component, OnInit } from '@angular/core';


 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(db: AngularFireDatabase,public authService: AuthService,public 
afAuth: AngularFireAuth,) { 
$(document).ready(function(){
  $("#showAppinfo").click(function(){
      $("#appinfo").slideToggle();
  });
});
ngOnInit()
{}
}

Y mi Html es el siguiente home.component.html

    <h1>This is Home page!!</h1>
    <h2 id="showAppinfo">Basic App-info</h2>
    <ul class="list-group" id="appinfo">
      <li class="list-group-item">Publiser: {{ (appinfo | async)?.Publisher }}</li>
      <li class="list-group-item">Publication_Year: {{ (appinfo | async)?.Publication_Year }}</li>
      <li class="list-group-item">Version: {{ (appinfo | async)?.Version }}</li>
      <li class="list-group-item">Registered Users: {{ (appinfo | async)?.Rusers }}</li>
      <li class="list-group-item">Languages: {{ (appinfo | async)?.Language }}(Only)</li>
   </ul>

Pero no pasa nada cuando hago clic en <h2 id="showAppinfo">Información básica de la aplicación</h2>. ¿Puedes decirme si estoy usando el código de jQuery en el lugar correcto? ¿El problema está en el código o en la instalación de jQuery?

Respuesta #1

El problema básico es que estás intentando manipular tu plantilla en el constructor. Pero cuando se ejecuta el constructor de tu componente, los elementos #showAppinfo y #appInfo aún no existen porque la vista no se ha construído.

Las operaciones que dependen de elementos de la vista deben realizarse, como mínimo, en el hook de ciclo de vida ngAfterViewInit

export class HomeComponent implements OnInit, OnAfterViewInit 
...

ngAfterViewInit(){
  // do your template manipulation here
}

Puedes probar esto con algo como console.log($ ("#showAppinfo")) y verás que no registra ningún constructor() de elemento, pero sí lo hace en ngAfterViewInit()

Respuesta #2

Siguiendo los pasos que funcionan para mí:

Instalar jquery npm install jquery

Instalar el tipo ts npm install @types/jquery

Agrega jquery.min.js en tu .angular-cli.json:

"scripts": [
   "../node_modules/jquery/dist/jquery.min.js"
]

Crea un servicio para JQuery con el Token, el Proveedor y la Fábrica:

import { InjectionToken } from '@angular/core';
import * as $ from 'jquery';

export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jquery');

export function jQueryFactory() {
    return $;
}

export const JQUERY_PROVIDER = { provide: JQUERY_TOKEN, useFactory: jQueryFactory };

Agrega el Proveedor en el Módulo:

@NgModule({
  declarations: [
    ...
  ],
  providers: [
    JQUERY_PROVIDER,
    ...
  ]
})

Usa DI en cualquier componente:

  constructor(
    @Inject(JQUERY_TOKEN) private $: JQueryStatic
  )

Sé feliz :D

this.$('body').css('background-color', 'red')

Artículos relacionados