Använd jQuery-skript med Angular 6 CLI-projekt

Jag utvecklar en applikation med Angular 6. Min applikation använder Minton Theme. Jag inkluderade alla themeskript i index.html-filen i mitt Angular-projekt. Men när jag loggar in eller navigerar mellan rutter fungerar vissa jQuery-metoder inte korrekt. Jag var tvungen att uppdatera sidan manuellt för att få dem att fungera. Finns det någon lösning på detta?

Jag kunde inte hitta någon fungerande lösning än.

Projektkomponenters struktur

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

fil index.html

<!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>

filen app.routing.module.ts

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 { }

Svar #1

Jquery-koden fungerar endast på startsidan och inte mellan rutter eftersom den inte ligger under Angulars förändringsdetektion.

Du behöver koppla in det i Angulars livscykelhakar.

Försök att följa dessa referenser:

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

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

Svar #2

Här är ett exempel som jag hoppas hjälper. Det är inte exakt vad du behöver, men jag hoppas att du kan hitta delar som sparar tid:

    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 () {
            });
        }
    }