当前位置: 代码迷 >> JavaScript >> 如何在Angular的每个导航中运行JS方法
  详细解决方案

如何在Angular的每个导航中运行JS方法

热度:63   发布时间:2023-06-13 12:39:38.0

在Angular项目中,当我将页面导航到另一个页面时,页面中将出现问题。

我添加的第3个JavaScript库在导航时已损坏。

所以我必须运行此代码。

declare var MY_LIBRARY: any;// referencing jQuery library

MY_LIBRARY.initAllPlugins();

我必须在每次导航时都运行此代码。

页面导航时如何运行此方法?

是否有中间件系统或类似的东西?

您可以像这样监听路线更改:

export class SomeComponent {
    constructor(private router: Router) {
        router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
                // do sth.
            }

            if (event instanceof NavigationEnd) {
                // do sth.
            }

            if (event instanceof NavigationError) {
                // do sth.
            }
        });
    }
}

但是请记住,在每次导航/路线更改时运行代码(尤其是初始化某些插件)可能会很昂贵,并且会影响应用程序的性能。

通常,您会将组件初始化时需要运行的所有组件代码放入OnInit方法中:

ngOnInit(){//您的初始化代码在这里}

在您的情况下,我将查看您正在运行的javascript库,看看是否可以使用Angular版本来替代,或者是一种更好的方式来引用这些库-也许在单例服务中可以持久存在,无论使用哪个组件加载。

您在这里提出的建议手腕很笨拙,这表明有一种更干净的方法可以解决根本问题。