时间戳

首页 > 解决方案 > 更改路由 Jquery 不工作后，再次刷新时正常工作

angular - 更改路由 Jquery 不工作后，再次刷新时正常工作

问题描述

当在 angular 中加载 Index.html 文件时，它的工作非常完美。但是每当将路由主页更改为另一个页面然后 Jquery 不加载，然后我检查到控制台但在控制台中明确没有任何错误要显示，然后我再次刷新到该页面，现在它正在工作。简而言之，何时更改它的路由;s 不能工作 jquery 到另一个页面。

我正在创建一个带有引导设计的两个组件。当将一个组件更改为第二个组件时，jquery 不加载并再次刷新该页面，它工作得很好

索引.html

<!doctype html>
<html lang="en">

<head>

  <base href="/">



  <!-- Basic Page Needs
	================================================== -->
  <meta charset="utf-8">
  <title>JRTechnolab</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
================================================== -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport">

  <!-- CSS
================================================== -->

  <!-- Bootstrap -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <!-- Template styles-->
  <link rel="stylesheet" href="assets/css/style.css">
  <!-- Responsive styles-->
  <link rel="stylesheet" href="assets/css/responsive.css">
  <!-- FontAwesome -->
  <link rel="stylesheet" href="assets/css/font-awesome.min.css">
  <!-- Animation -->
  <link rel="stylesheet" href="assets/css/animate.css">
  <!-- Prettyphoto -->
  <link rel="stylesheet" href="assets/css/prettyPhoto.css">
  <!-- Owl Carousel -->
  <link rel="stylesheet" href="assets/css/owl.carousel.css">
  <link rel="stylesheet" href="assets/css/owl.theme.css">
  <!-- Flexslider -->
  <link rel="stylesheet" href="assets/css/flexslider.css">
  <!-- Flexslider -->
  <link rel="stylesheet" href="assets/css/cd-hero.css">
  <!-- Style Swicther -->
  <link id="style-switch" href="assets/css/presets/preset3.css" media="screen" rel="stylesheet" type="text/css">

  <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
  <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body>
  <!-- Style switcher start -->
  <div class="style-switch-wrapper">
    <div class="style-switch-button">
      <i class="fa fa-sliders"></i>
    </div>
    <h3>Style Options</h3>
    <button id="preset1" class="btn btn-sm btn-primary"></button>
    <button id="preset2" class="btn btn-sm btn-primary"></button>
    <button id="preset3" class="btn btn-sm btn-primary"></button>
    <button id="preset4" class="btn btn-sm btn-primary"></button>
    <button id="preset5" class="btn btn-sm btn-primary"></button>
    <button id="preset6" class="btn btn-sm btn-primary"></button>
    <br /><br />
    <a class="btn btn-sm btn-primary close-styler pull-right">Close X</a>
  </div>
  <!-- Style switcher end -->

  <div class="body-inner">

    <app-root></app-root>


    <!-- initialize jQuery Library -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <!-- Bootstrap jQuery -->
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
    <!-- Style Switcher -->
    <script type="text/javascript" src="assets/js/style-switcher.js"></script>
    <!-- Owl Carousel -->
    <script type="text/javascript" src="assets/js/owl.carousel.js"></script>
    <!-- PrettyPhoto -->
    <script type="text/javascript" src="assets/js/jquery.prettyPhoto.js"></script>
    <!-- Bxslider -->
    <script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
    <!-- CD Hero slider -->
    <script type="text/javascript" src="assets/js/cd-hero.js"></script>
    <!-- Isotope -->
    <script type="text/javascript" src="assets/js/isotope.js"></script>
    <script type="text/javascript" src="assets/js/ini.isotope.js"></script>
    <!-- Wow Animation -->
    <script type="text/javascript" src="assets/js/wow.min.js"></script>
    <!-- SmoothScroll -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script>
    <!-- Eeasing -->
    <script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
    <!-- Counter -->
    <script type="text/javascript" src="assets/js/jquery.counterup.min.js"></script>
    <!-- Waypoints -->
    <script type="text/javascript" src="assets/js/waypoints.min.js"></script>
    <!-- Template custom -->
    <script type="text/javascript" src="assets/js/custom.js"></script>
  </div>
</body>

</html>

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
   { path: '', redirectTo:'home',pathMatch:'full' },
   { path: 'home', component: HomeComponent },
   { path: 'contact', component: ContactComponent },
];

@NgModule({

imports: [
   CommonModule,RouterModule.forRoot(routes)
 ],
 exports: [RouterModule]
})

export class AppRoutingModule { }

Jquery 未加载到角度最新 8 Plus 版本中的另一个页面

标签： angular

解决方案

亲爱的朋友我解决了这个问题查看答案

在您的 component.ts 文件中，有一个要命名的函数是 ngOnInit。所以可以加载Css和Js文件的路径是ngOnInIt函数。该功能基本上首先运行到第一次加载组件时。

回答：

home.component.ts

import { Component, OnInit, ElementRef, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as $ from 'jquery';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private elementRef: ElementRef,@Inject(DOCUMENT) private doc ) 
  { 
  }

  ngOnInit() 
  {

     let link1: HTMLLinkElement = this.doc.createElement('link');
     link1.setAttribute('rel', 'amphtml');
     link1.setAttribute('href', '../assets/css/bootstrap.min.css');
     this.doc.head.appendChild(link1);

     let link: HTMLLinkElement = this.doc.createElement('link');
     link.setAttribute('rel', 'amphtml');
     link.setAttribute('href', '../assets/css/owl.carousel.css');
     this.doc.head.appendChild(link);


     var s14 = document.createElement("script");
     s14.type = "text/javascript";
     s14.src = "../assets/js/bootstrap.min.js";
     this.elementRef.nativeElement.appendChild(s14);

     var s1 = document.createElement("script");
     s1.type = "text/javascript";
     s1.src = "../assets/js/style-switcher.js";
     this.elementRef.nativeElement.appendChild(s1);
   }
}

它工作正常。

推荐阅读