在Angular 6 CLI项目中使用jQuery脚本
我正在用angular 6开发一个应用程序。我的应用程序使用。我在我的angular项目的在Angular 6 CLI项目中使用jQuery脚本,jquery,angular,typescript,angular-cli,angular6,Jquery,Angular,Typescript,Angular Cli,Angular6,我正在用angular 6开发一个应用程序。我的应用程序使用。我在我的angular项目的index.html文件中包含了所有主题脚本。但是,当我登录或在路由之间导航时,一些jquery方法无法正常工作。我必须手动刷新页面以使其正常工作。有解决办法吗 我还没有找到任何有效的解决办法 项目组件结构 app -components --footer --left-side-bar --header --pages ---dashboard ----home ----accounts ---login
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>
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的更改检测之下 你需要将它连接到有角度的生命周期挂钩中 请尝试遵循以下参考:
尝试使用路由器的重新激活方法并实现可重用(从“角度/路由器”) 第二种方法,你可以尝试使用ngOnInit方法来自我损失资源
this.ngOnInit();
这里有一个例子,我希望对你有所帮助。这并不完全是您需要的,但我希望您能找到节省时间的部件:
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 () {
});
}
}
是的35; Rotemya,Randika遵循此链接的说明,jQuery将如何在路由之间工作,它只在index.html页面上工作,而不在其他页面(如counter.html等)中工作。
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 () {
});
}
}