Javascript Angular 4中的脚本在更改视图后不工作

Javascript Angular 4中的脚本在更改视图后不工作,javascript,angular,web,angular-components,angular-component-router,Javascript,Angular,Web,Angular Components,Angular Component Router,在我的angular 4应用程序中,我有一些脚本,当我第一次加载时,所有脚本都正常,但当将视图更改为我应用程序的其他组件并返回主页时,所有脚本都不工作。例如,在控制台日志发送消息中,这是一个向上滚动的功能 $(window).scroll(function() { var wScroll = $(this).scrollTop(), scrollAmount = 150; if (wScroll > scrollAmount) { $(".button__scroll--up").a

在我的angular 4应用程序中,我有一些脚本,当我第一次加载时,所有脚本都正常,但当将视图更改为我应用程序的其他组件并返回主页时,所有脚本都不工作。例如,在控制台日志发送消息中,这是一个向上滚动的功能

$(window).scroll(function() {
var wScroll = $(this).scrollTop(), scrollAmount = 150;

if (wScroll > scrollAmount) {
  $(".button__scroll--up").addClass("is_showing");
} else {
  $(".button__scroll--up").removeClass("is_showing");
}

});

$('.button__scroll--up').click( function(){
$('html , body').animate({scrollTop: 0},1000);
})  
控制台日志会发送这个消息

Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLDivElement.<anonymous> (efects-styles.js:58)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2839)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (polyfills.bundle.js:2606)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (polyfills.bundle.js:2913)
at invokeTask (polyfills.bundle.js:3779)
at HTMLDivElement.globalZoneAwareCallback (polyfills.bundle.js:3797

请帮帮我,谢谢

这是因为Angular仅加载初始视图中的DOM元素。您需要编写一个脚本,在路由更改时重新运行脚本


解决这个问题的方法是绑定到路由器事件,当路由发生变化时,使用jQuery AJAX获取脚本并运行结果。

1。这不是一个可验证的最小示例;2.您应该使用角度功能呈现DOM感谢wilsonhobbs这非常有帮助,我用您的指令和其他方式解决了问题,在onInit方法中包含javascript文件,再次感谢!!如果这个答案有帮助,我将非常感谢您将其标记为已回答:thanks@AndyTorresTorres你是如何在onInit方法中包含javascript文件的..你能解释一下吗?@RamAnji只把这个$.getScript'route/of/your/file.js';我希望这对你有用you@RamAnji抱歉,我忘记了首先安装这个npm install jquery-保存npm install@types/jquery-D,并将其添加到组件中,您将使用js import*作为$from'jquery';