web-dev-qa-db-ja.com

Angular 6 CLIプロジェクトでjQueryスクリプトを使用する

angular 6.を使用してアプリケーションを開発しています。私のアプリケーションでは Minton Theme を使用しています。すべてのテーマスクリプトをindex.htmlファイルangularプロジェクト。ただし、ログインしたり、ルート間を移動したりすると、一部の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 { }
jqueryangulartypescriptangular-cliangular6
2
Randika

Jqueryコードは、Angleの変更検出の下にないため、開始ページでのみ機能し、ルート間では機能しません。

これをangularライフサイクルフックにフックする必要があります。

このリファレンスに従ってください：

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

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

4
RtmY

これが私が助けてくれるといい例です。それはあなたが必要とするものではありませんが、あなたの時間を節約する部品を見つけることができると思います：

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

ルータのrenavigateメソッドを使用してCanReuseを実装してみてください（「angular/router」から）。

router.renavigate();

そして2番目の方法は、リソースを自己破壊するためにngOnInitメソッドを試すことです。

 this.ngOnInit();
1
user10154685