web-dev-qa-db-fra.com

Utiliser le script jQuery avec Angular 6 CLI project

Je développe une application en utilisant angular 6. Mon application utilise Thème Minton . J'ai inclus tous les scripts de thème dans le index.html fichier de mon angular angulaire. Mais lorsque je me suis connecté ou que je navigue entre les routes, certaines méthodes jquery ne fonctionnent pas correctement. J'ai dû actualiser la page manuellement pour les faire fonctionner. Existe-t-il un correctif pour cela ?

Je n'ai pas encore trouvé de solution de travail.

Structure des composants du projet

app
-components
--footer
--left-side-bar
--header
--pages
---dashboard
----home
----accounts
---login

index.html fichier

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Logical Position</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/minton_theme/images/favicon.ico">

<link href="assets/minton_theme/plugins/switchery/switchery.min.css" rel="stylesheet" />
<link href="assets/minton_theme/plugins/jquery-circliful/css/jquery.circliful.css" rel="stylesheet" type="text/css" />
<link href="assets/minton_theme/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/minton_theme/css/icons.css" rel="stylesheet" type="text/css">
<link href="assets/minton_theme/css/style.css" rel="stylesheet" type="text/css">

<script src="assets/minton_theme/js/modernizr.min.js"></script>
</head>

<body class="fixed-left widescreen">
<app-root></app-root>

<script>
var resizefunc = [];
</script>

<!-- Plugins  -->
<script src="assets/minton_theme/js/jquery.min.js"></script>
<script src="assets/minton_theme/js/popper.min.js"></script>
<!-- Popper for Bootstrap -->
<script src="assets/minton_theme/js/bootstrap.min.js"></script>
<script src="assets/minton_theme/js/detect.js"></script>
<script src="assets/minton_theme/js/fastclick.js"></script>
<script src="assets/minton_theme/js/jquery.slimscroll.js"></script>
<script src="assets/minton_theme/js/jquery.blockUI.js"></script>
<script src="assets/minton_theme/js/waves.js"></script>
<script src="assets/minton_theme/js/wow.min.js"></script>
<script src="assets/minton_theme/js/jquery.nicescroll.js"></script>
<script src="assets/minton_theme/js/jquery.scrollTo.min.js"></script>
<script src="assets/minton_theme/plugins/switchery/switchery.min.js"> 
</script>

<!-- Counter Up  -->
<script src="assets/minton_theme/plugins/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="assets/minton_theme/plugins/counterup/jquery.counterup.min.js"></script>

<!-- circliful Chart -->
<script src="assets/minton_theme/plugins/jquery-circliful/js/jquery.circliful.min.js"></script>
<script src="assets/minton_theme/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>

<!-- skycons -->
<script src="assets/minton_theme/plugins/skyicons/skycons.min.js" type="text/javascript"></script>

<!-- Page js  -->
<script src="assets/minton_theme/pages/jquery.dashboard.js" defer> 
</script>

<!-- Custom main Js -->
<script src="assets/minton_theme/js/jquery.core.js"></script>

<script src="assets/minton_theme/js/jquery.app.js"></script>
</body>

</html>

app.routing.module.ts fichier

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from 
'./components/pages/dashboard/dashboard.component';
import { LoginComponent } from 
'./components/pages/login/login.component';
import { UnAuthGuardService } from './guards/un-auth.guard';
import { AuthGuardService } from './guards/auth.guard';
import { AccountsComponent } from 
'./components/pages/dashboard/accounts/accounts.component';
import { ViewAccountsComponent } from 
'./components/pages/dashboard/accounts/view-accounts/view- 
accounts.component';
import { MyAccountsComponent } from 
'./components/pages/dashboard/accounts/my-accounts/my- 
accounts.component';
import { CreateAccountComponent } from 
'./components/pages/dashboard/accounts/create-account/create- 
account.component';
import { HomeComponent } from 
'./components/pages/dashboard/home/home.component';

const routes: Routes = [
{ path: 'login', component: LoginComponent, canActivate: 
[UnAuthGuardService] },
{
path: '',
component: DashboardComponent,
canActivate: [AuthGuardService],
children: [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: HomeComponent
  },
  {
    path: 'accounts',
    component: AccountsComponent,
    children: [
      {
        path: '',
        component: ViewAccountsComponent
      },
      {
        path: 'create',
        component: CreateAccountComponent
      },
      {
        path: ':username',
        component: MyAccountsComponent
      }
    ]
  }
 ]
},
 { path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})

export class AppRoutingModule { }
jqueryangulartypescriptangular-cliangular6
2
Randika

Le code Jquery ne fonctionne que dans la page de démarrage et non entre les routes car il n'est pas sous la détection de changement angulaire.

Vous devez le connecter aux crochets du cycle de vie angular.

Essayez de suivre ces références:

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

https://www.youtube.com/watch?v=mAwqk-eIPL8

4
RtmY

Voici un exemple qui, je l'espère, vous aidera. Ce n'est pas exactement ce dont vous avez besoin mais j'espère que vous pouvez trouver des pièces qui vous feront gagner du temps:

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import { Router } from '@angular/router';
    import * as $ from 'jquery'

    import { Globals } from '../helpers/globals';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })

    export class AppComponent implements OnInit, AfterViewInit {
        title = 'dashboard-app';
        authentication = false;

        constructor(private globals: Globals) {

        }

        ngOnInit() {

            // this.helpers.logout();
            // this.router.navigate(['/login']);
        }

        ngAfterViewInit() {
            // loading templates js after dom render
            $.getScript("../plugins/custombox/dist/custombox.min.js", function () {
            });
            $.getScript("../plugins/custombox/dist/legacy.min.js", function () {
            });

            $.getScript("/assets/js/jquery.core.js", function () {
            });
            $.getScript("/assets/js/jquery.app.js", function () {
            });
        }
    }
2
Nour Lababidi

Essayez d'utiliser la méthode renavigate du routeur et implémentez CanReuse (à partir de 'angular/router').

router.renavigate();

Et 2e façon, vous pouvez essayer le mehtod ngOnInit pour sélectionner automatiquement les ressources.

 this.ngOnInit();
1
user10154685