Utilice el script jQuery con el proyecto Angular 6 CLI

Estoy desarrollando una aplicación usando angular 6. Mi aplicación usa Minton Theme . Incluí todos los scripts de temas en el archivo index.html de mi proyecto angular. Pero cuando inicié sesión o navegué entre rutas, algunos métodos de jQuery no funcionaban correctamente. Tuve que actualizar la página manualmente para que funcionen. ¿Hay una solución para esto?

No pude encontrar ninguna solución de trabajo todavía.

Estructura de los componentes del proyecto

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

archivo index.html

     Logical Position              var resizefunc = [];                                 

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

El código Jquery funciona solo en la página de inicio y no entre rutas porque no está bajo la detección de cambios del ángulo.

Necesita engancharlo en los ganchos de ciclo de vida angular.

Intenta seguir estas referencias:

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

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

Trate de usar el método de enrutamiento de enrutamiento e implemente CanReuse (de ‘angular / router’).

 router.renavigate(); 

Y la segunda forma en la que puede probar ngOnInit mehtod para auto-enviar los recursos.

  this.ngOnInit(); 

Aquí hay un ejemplo que espero ayude. No es exactamente lo que necesitas, pero estoy esperando que puedas encontrar piezas que te ahorren tiempo:

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