可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm developing an application using angular 6. My application use Minton Theme . I included all theme scripts in the index.html file of my angular project. But when I logged in or navigate between routes some jquery methods not working properly. I had to refresh page manually to make them work. Is there an fix for this?

I couldn't find any working solution yet.

Project components structure

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

index.html file

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

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

回答1:

The Jquery code works only in the starting page and not between routes because it is not under the angular's change detection.

You need to hook it up into the angular life cycle hooks.

Try follow this references:

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

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

回答2:

Try to use renavigate method of router and implement CanReuse (from 'angular/router').

router.renavigate();

And 2nd way you may try ngOnInit mehtod for selflosding the resources.

 this.ngOnInit();

回答3:

Here is an example I hope helps. It is not exactly what you need but I'm hopping you can find parts that will save your time:

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

文章来源: Use jQuery script with Angular 6 CLI project

标签

angular

jquery

dashboard

脚本