时间戳

首页 > 解决方案 > Angular - 菜单在 IE 和 Firefox 上不起作用

javascript - Angular - 菜单在 IE 和 Firefox 上不起作用

问题描述

我正在使用在我的 Angular 应用程序上加载 onInit 的 Javascript 菜单，它在 Chrome 上运行良好，但在 IE Edge 和 Firefox 上运行良好。

我的打字稿文件上的代码是：

ngOnInit() {
   //getmenu items
$(document).ready(function() {
  //addclasses to menu, etc.. 
});

因此，在调试之后，我认为我找到了解决方案，即添加事件侦听器而不是 document.ready。

现在，如果我添加事件监听器，事情就会变得混乱：

ngOnInit() {
//getmenu items
window.addEventListener('load', function () {
//addclasses to menu, etc.. 
});

当我第一次加载应用程序（登录页面 - > 重定向菜单页面所在的位置）时，它不起作用，但如果我按 f5 并在没有登录的情况下重新加载页面，它可以工作，只有在 IE 上的 firefox .. 上不起作用。但如果我改变：

 window.addEventListener('load', function ()

至

 window.addEventListener('focus', function ()

正如我第一次说的那样，它在 Firefox 和 chrome 上不起作用（子菜单闪烁），但在刷新页面后在 IE 上起作用。

所以，问题是，是否有任何类型的事件监听器适用于每个浏览器？还是每次登录都必须刷新页面？我知道这个问题有点令人困惑。有谁知道如何解决这个问题？

标签： javascriptangularaddeventlistener

解决方案

addEventListener 适用于大多数浏览器 - 请参阅https://caniuse.com/#feat=addeventlistener

可能是因为你开得太早了试试这个：

ngAfterViewInit() {
  window.addEventListener('load', function () {
    //addclasses to menu, etc.. 
  });
}

编辑：

进一步我们在评论中的讨论，如果你想更多地延迟执行：

ngAfterViewInit() {
  const interval = setInterval(() => {

    const condition = window.addEventListener
    if (condition) {
      // fire any code you want to when condition is met
      window.addEventListener('load', function () {
        //addclasses to menu, etc.. 
      });
      clearInterval(interval) // stop firing the code
    }
  }, 100) // fire the code every 100ms
}

不确定你想要实现什么，你的条件是什么，或者当条件满足时你想执行什么代码，但是如果你知道条件是什么，这种延迟代码执行的模式很容易遵循。

推荐阅读