在Angular 6 CLI项目中使用jQuery脚本 [英] Use jQuery script with Angular 6 CLI project
问题描述
我正在使用angular 6开发应用程序.我的应用程序使用 Minton主题 .我在我的角度项目的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代码仅在起始页中起作用,而在路线之间不起作用,因为它不在角度变化检测范围内.
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
这篇关于在Angular 6 CLI项目中使用jQuery脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!