将jQuery脚本与Angular 6 CLI项目一起使用

我正在使用角度6开发应用程序。我的应用程序使用Minton主题 。 我在我的angular项目的index.html文件中包含了所有主题脚本。 但是当我登录或在路由之间导航时，一些jquery方法无法正常工作。 我不得不手动刷新页面以使它们工作。 有没有解决这个问题？

我找不到任何有效的解决方案了。

项目组件结构

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

index.html文件

                   var resizefunc = [];                                 

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

Answer 1

Jquery代码仅在起始页面中起作用，而不在路由之间起作用，因为它不在angular的变化检测之下。

您需要将其连接到角度生命周期钩子中。

请尝试遵循以下参考：

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

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

Answer 2

尝试使用路由器的renavigate方法并实现CanReuse（来自’angular / router’）。

 router.renavigate(); 

第二种方法你可以试试ngOnInit mehtod来自我修改资源。

  this.ngOnInit(); 

Answer 3

这是一个我希望有帮助的例子。 这不完全是你需要的，但我跳了你可以找到可以节省你时间的零件：

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