typescript 在 Angular 6 CLI 项目中使用 jQuery 脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51629951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery script with Angular 6 CLI project
提问by Randika
I'm developing an application using angular 6. My application use Minton Theme. I included all theme scripts in the index.htmlfile 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?
我正在使用 angular 6 开发应用程序。我的应用程序使用Minton Theme。我在index.html我的 angular 项目的文件中包含了所有主题脚本。但是当我登录或在路由之间导航时，一些 jquery 方法无法正常工作。我必须手动刷新页面才能使它们工作。有没有办法解决这个问题？
I couldn't find any working solution yet.
我还没有找到任何可行的解决方案。
Project components structure
项目组件结构
app
-components
--footer
--left-side-bar
--header
--pages
---dashboard
----home
----accounts
---login
index.htmlfile
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.tsfile
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 { }
回答by RtmY
The Jquery code works only in the starting page and not between routes because it is not under the angular's change detection.
Jquery 代码仅在起始页面中工作，而不在路由之间工作，因为它不在 angular 的更改检测下。
You need to hook it up into the angular life cycle hooks.
您需要将其连接到 angular 生命周期挂钩中。
Try follow this references:
尝试遵循此参考：
https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176
https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176
回答by Nour Lababidi
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 () {
});
}
}
回答by Nour Lababidi
Try to use renavigate method of router and implement CanReuse (from 'angular/router').
尝试使用路由器的 renavigate 方法并实现 CanReuse（来自'angular/router'）。
router.renavigate();
And 2nd way you may try ngOnInit mehtod for selflosding the resources.
第二种方式您可以尝试使用 ngOnInit 方法来自我丢失资源。
this.ngOnInit();
