Question

在将路由更改为主页时，javascript和jquery代码未加载到Angular 5中

Answer 1

首先，将脚本添加到.js文件，然后将其保存在angular.json下，如下所示

"scripts": ["src/assets/js/modelsupport.js"],

在您想要它起作用的component.ts中添加以下代码

URL可以根据您的角度版本以src / assets或资产开头

url = "assets/js/modelsupport.js";

之后，在ngOnInit（）中或您想调用的任何地方添加以下代码

this.loadAPI = new Promise(resolve => {
  console.log("resolving promise...");
  this.loadScript();
});

在您的类中添加loadScript（）函数之后

public loadScript() {
    console.log("preparing to load...");
    let node = document.createElement("script");
    node.src = this.url;
    node.type = "text/javascript";
    node.async = true;
    node.charset = "utf-8";
    document.getElementsByTagName("head")[0].appendChild(node);
}

希望您能解决您的问题

Answer 2

这是一个有角度的方式

export class PagesComponent implements OnInit, OnDestroy {
  routerSubscription: any;
  constructor(private router: Router) {}

  ngOnInit() {
    this.recallJsFuntions();
  }

  /**
   * @description when we navigate from one page to another `scope of js funtions`
   * finished so we have to call it again.
   */
  recallJsFuntions() {
    this.routerSubscription = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(event => {
        $.getScript('/assets/js/common.js');
      });
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }
}

Answer 3

尝试清除浏览器历史记录或尝试使用隐私浏览

Answer 4

根据你的问题，我认为问题在于脚本初始化。尝试使用：

$(document).ready(function() {

});

初始化脚本。

Answer 5

您需要将脚本加载到const express = require('express'); const bodyParser = require('body-parser'); const app = express(); function setDeepValue(path, obj, value) { const tokens = path.split('.'); const last = tokens.pop(); for (const token of tokens) { if (!obj.hasOwnProperty(token)) { obj[token] = {}; } obj = obj[token]; } obj[last] = value; } app.use(bodyParser.urlencoded(), function(req, res, next) { let obj = {}; for (const key in req.body) { setDeepValue(key, obj, req.body[key]); } req.body = obj; next(); }); app.post('/create', function(req, res) { console.log(req.body) })中。这是因为当角度更改其路线时，它不会触发ngOnInit()。这就是为什么JS不调用的原因。添加document.ready将解决此问题。每当您的ngOnInit被调用时，它将加载JS。

ngOnInit

Answer 6

这对我有用，

将此代码添加到您的app.component.ts文件中

  constructor(private elRef: ElementRef){ 
  
  }

  ngOnInit(){
      $.getScript('/assets/js/custom-script.js'); //Add path to your custom js file
  }

  observer;

  ngAfterViewInit(){
    this.observer = new MutationObserver(mutations => {
      
      console.log('Dom change detected...');
      $.getScript('/assets/js/custom-script.js'); //Add path to your custom js file

    });
    var config = { attributes: true, childList: true, characterData: true };

    this.observer.observe(this.elRef.nativeElement, config);
  }

如果jQuery代码给出错误，则

安装@ types / jquery
在类型[[] tsconfig文件列表中添加'jquery'。

在角度页面中不会每次都重新加载，但是可以加载或删除DOM元素。在角路由中；组件和DOM元素是动态加载的，但是自定义脚本只能在页面刷新时加载一次，加载脚本后，DOM中的任何更改都不会影响脚本。

为此，我们必须注意DOM中的更改，如果有更改，则每次都加载自定义脚本。变异观察者会检测DOM中的更改。

此解决方案还可以解决* ngIf问题，条件是组件按条件加载。

更改路线后Angular 4脚本无法正常工作

6 个答案: