在 Angular 6 CLI 项目中使用 jQuery 脚本答案

【问题标题】：Use jQuery script with Angular 6 CLI project在 Angular 6 CLI 项目中使用 jQuery 脚本
【发布时间】：2018-08-01 09:35:33
【问题描述】：

我正在使用 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 { }

【问题讨论】：

是的#Rotemya，Randika 遵循此链接的指示medium.com/@swarnakishore/…

标签： jquery angular typescript angular-cli angular6

【解决方案1】：

Jquery 代码仅在起始页面中起作用，而不是在路由之间，因为它不在 Angular 的更改检测之下。

您需要将其连接到角度生命周期挂钩中。

尝试遵循以下参考：

https://medium.com/@swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176

https://www.youtube.com/watch?v=mAwqk-eIPL8

【讨论】：

jQuery 如何在路由之间工作，它只适用于 index.html 页面，不适用于 counter.html 等其他页面。

【解决方案2】：

这是一个例子，希望对您有所帮助。这不是您所需要的，但我希望您能找到可以节省您时间的部件：

    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 () {
            });
        }
    }

【讨论】：

【解决方案3】：

尝试使用路由器的重新导航方法并实现CanReuse（来自'angular/router'）。

router.renavigate();

第二种方法你可以尝试使用 ngOnInit 方法来自我丢失资源。

 this.ngOnInit();

【讨论】：