我正在使用angular 6开发应用程序。我的应用程序使用Minton Theme。我将所有主题脚本都包括在我的angular项目的index.html文件中。但是，当我登录或在路线之间导航时，某些jquery方法无法正常工作。我必须手动刷新页面才能使其正常工作。有解决办法吗？
我找不到任何可行的解决方案。
项目组件结构
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 { }
答案 0 :(得分：3)
Jquery代码仅在起始页面有效，而不能在路线之间起作用，因为它不在角度变化检测范围内。
您需要将其连接到有角度的生命周期挂钩中。
尝试遵循以下参考文献：
https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176
答案 1 :(得分：1)
尝试使用路由器的重新启用方法并实现CanReuse（来自“ angular / router”）。
int main(void) {
printf("HelloWorld!\n");
PLOADED_IMAGE img = ImageLoad("file.exe", R"(path)");
if (nullptr == img) { return EXIT_FAILURE; }
printf("Loaded: %s\n", img->ModuleName);
for (auto index = 0; index < img->FileHeader->FileHeader.NumberOfSections; ++index) {
printf("Section Name: %s\n", img->Sections[index].Name);
}
ImageUnload(img);
return EXIT_SUCCESS;
}
第二种方法，您可以尝试使用ngOnInit方法来自动丢失资源。
router.renavigate();
答案 2 :(得分：1)
这里是一个例子，希望对您有所帮助。这并不是您真正需要的，但我希望您能找到可以节省时间的零件：
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 () {
});
}
}