Question

我正在尝试将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();
  ....
});

component.ts

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');
  }
}

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

Answer 1

最好在component.ts中的TypeScript中编写js代码
而且不需要jQuery的document.ready，window.load等功能
因为角钢有其自己的生命周期钩子
看到这个-> See This

Answer 2

使用@SreedevR和@mlMughal的反馈，这是我的方法。

在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>

在component.ts中：

export class HomeComponent implements OnInit {
A:any;

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

Answer 3

请在主html文件中包含js，然后您就可以在组件中调用小说了。

例如：如果您的脚本文件是test.js，请将该文件包含在html文件中，并在

之类的组件中调用其中声明的任何函数。

    fig = Figure(figsize=(5, 5), dpi=100)

    canvas = FigureCanvasTkAgg(fig, master=root)
    canvas.get_tk_widget().grid(row=1,column=4,columnspan=3,rowspan=20)
    # here: plot suff to your fig
    canvas.draw()

    ###############    TOOLBAR    ###############
    toolbarFrame = Frame(master=root)
    toolbarFrame.grid(row=22,column=4)
    toolbar = NavigationToolbar2TkAgg(canvas, toolbarFrame)

希望这现在很清楚

将Web App迁移到Angular 2

3 个答案: