在 Angular 6 CLI 项目中使用 jQuery 脚本 [英] Use jQuery script with Angular 6 CLI project
本文介绍了在 Angular 6 CLI 项目中使用 jQuery 脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 angular 6 开发应用程序.我的应用程序使用 Minton Theme.我在我的 angular 项目的 index.html 文件中包含了所有主题脚本.但是当我登录或在路由之间导航时，一些 jquery 方法无法正常工作.我必须手动刷新页面才能使它们工作.有没有办法解决这个问题?
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.
项目组件结构
app
-components
--footer
--left-side-bar
--header
--pages
---dashboard
----home
----accounts
---login
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>
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 { }
推荐答案
Jquery 代码只在起始页中工作，而不在路由之间工作，因为它不在 angular 的变化检测之下.
The Jquery code works only in the starting page and not between routes because it is not under the angular's change detection.
您需要将其连接到 angular 生命周期钩子中.
You need to hook it up into the angular life cycle hooks.
尝试遵循以下参考:
https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176
https://www.youtube.com/watch?v=mAwqk-eIPL8
这篇关于在 Angular 6 CLI 项目中使用 jQuery 脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
