Angular 4 中的脚本在更改视图后不起作用

Question

在我的 angular 4 应用程序中，我有一些脚本，当我第一次加载时一切正常，但是当将视图更改为我的应用程序的其他组件并将 return 更改为主页时，所有它破坏脚本不起作用。在控制台日志中发送消息，例如这个函数滚动顶部

$(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

请帮助我，谢谢！！

Answer 1

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

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

Angular 4 中的脚本在更改视图后不起作用

scripts in Angular 4 not working after change view

javascript

angular

web

angular-components

angular-component-router