Javascript 将Web应用迁移到Angular 2_Javascript_Jquery_Angular

Javascript 将Web应用迁移到Angular 2

javascript jquery angular

Javascript 将Web应用迁移到Angular 2,javascript,jquery,angular,Javascript,Jquery,Angular,我正在尝试将web应用程序移动到Angular2。我已经成功地将HTML和CSS分别移动到angular的component.HTML和component.CSS。但是，我在处理.js文件时遇到了问题如何将.js文件合并到component.ts中 .js文件： A = (function(w){ var init = function(){}; var scrollToElement = function(){}; }(window); $(document).ready(

我正在尝试将web应用程序移动到Angular2。我已经成功地将HTML和CSS分别移动到angular的component.HTML和component.CSS。但是，我在处理.js文件时遇到了问题

如何将.js文件合并到component.ts中

.js文件：

A = (function(w){
    var init = function(){};
    var scrollToElement = function(){};
}(window);

$(document).ready(function() {
  A.init();
  A.scrollToElement();
  ....
});

组件技术

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $.getScript('assets/js/script.js');
  }
}

这是正确的吗？我做错了什么？

请在主html文件中包含js，您可以在组件中调用虚构

如果脚本文件是test.js，请将其包含在html文件中，并在组件中调用其中声明的任何函数，如

f（）{
新测试（）；
}

最好在component.ts中用TypeScript编写js代码
而且不需要jQuery的document.ready、window.load等功能
因为angular有自己的生命周期挂钩

看到这个-->

使用@SreedevR和@mlmoghal的反馈，下面是我是如何做到的

在index.html中，我包含脚本文件：

<!doctype html>
<html lang="en" class="no-js">
<head>
   <base href="/">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <script src="assets/js/script.js"></script>
</head>
<body></body>
</html>

这两个文件是如何合并或实现的？这两个文件能否共存？或者我需要将js的内容移动到ts或将js合并到ts？js中的大多数函数都是在document.ready时调用的。如何在component.ts中实现这一点？您可以将js迁移到类型脚本中，或者如果您仍然想使用js，请使用与document等效的angular“ngOnInit（）”。ready@Melissa正如我在上面所回答的，您应该为document.ready是ngOninit（）的问题替换捕获适当的生命周期钩子对于像onPageLoad（）、onUnload（）、onBeforeUnload（）等其他函数，您必须捕获不同的钩子

export class HomeComponent implements OnInit {
A:any;

constructor() { }
ngOnInit() {}
ngAfterViewInit(){
   A.init();
   A.scrollToElement();
  }
}
}