Javascript 角度菜单在IE和Firefox上不起作用

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

我的typescript文件上的代码是：

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

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

现在，如果我添加eventlistener，事情就会变得混乱：

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

当我第一次加载应用程序登录页面->重定向菜单页面时，它不起作用，但如果我点击f5并在不登录的情况下重新加载页面，它只在firefox上起作用。。在我身上不起作用。但如果我改变：

 window.addEventListener('load', function () 

到

它在firefox和chrome上不起作用，但在IE上起作用，在刷新页面后，正如我第一次说的那样

---

所以，问题是，是否有任何类型的事件侦听器可以在每个浏览器上工作？或者，如果我登录，是否每次都必须刷新页面？我知道这个问题有点让人困惑。有人知道如何解决这个问题吗

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
}

---

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

您已经在使用OnInit生命周期挂钩。创建/更新/销毁组件时，Angular会调用不同的生命周期挂钩，并允许您对事件进行操作。Angular框架确保这些事件在所有主要浏览器中都能正常工作。对于您的用例，您不需要在ngOnInit方法中使用任何单独的事件侦听器，您可以使用ngOnInit或ngAfterViewInit方法来完成创建组件时所需的所有工作。有关Angular lifecycle hooks的更多信息，您可以阅读。

我知道hagner，我一直在使用onInit，而且效果很好，在这种情况下，我想我会提前启动init上的JS函数。 让我这样说：

当我登录时，我进入仪表板，这意味着；ip：端口/仪表板 现在我告诉你：如果我将页面重新加载到ip:port/ 为什么

如果我点击F5IP:port/仪表板，IE不工作，只有当我重新加载到ip:port时/

这是我的tipescript代码：它包含所有推送和生成菜单的代码，以及单击菜单、子菜单以及单击内部或外部等

menu.compontent.ts：

---

你检查过你的花粉粒了吗？所有东西都正确导入？？我有核心js/es6/*东西，比如集合、地图、日期、符号等。。导入、core js/es6/reflect、core js/es7/reflect和zone.js/dist/ZoneChange为ngAfterViewInit后，问题依然存在，但现在我在任何浏览器上点击f5或crtl+f5，菜单开始工作。。你说得对，因为我很早就开始加载js了。。但是我怎么能延迟呢？你可以延迟JS的执行，但是在setInterval中包装JS，它会一直启动直到满足某些条件。我将在这篇文章中添加一个示例。我尝试了3秒的setInterval并执行JS代码，但问题仍然存在。。我不知道为什么会这样，也不知道会发生什么。如果我将页面重新加载到ip:port/或url/上，它会在每个浏览器上工作，就像菜单只在将页面重新加载到原始url后工作一样。。如果你愿意，我可以发布我的TS代码。。

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
}

export class MenuComponent implements OnInit {
    private sub: any;
    public menu;
    public arr;
    showMenu = '';

  constructor(private _menu: MenuService,
              private router: Router) {}
ngOnInit() {

      let times = 0;
      if( times === 0)
      {
this._menu.getMenu()
          .subscribe( res => {
              let data = res;

              console.log(data);
              this.arr = data;
              this.arr = (<any>Object).values(data);
              console.log(this.arr );
              //debugger;
              times ++; //only push json wich contains menu one time!!
          });
       }
window.addEventListener('load', function () {
"use strict";

          $('.menu > ul > li:has(ul)').addClass('menu-dropdown-icon');
          //Checks if li has sub (ul) and adds class for toggle icon - just an UI

          $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
          //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

          $(".menu > nav > div > a").before("<a href=\"#\" class=\"menu-mobile\"><i class='icon-mod-mais fs1'></i></a>");
$(".menu > ul > li").click(function(e) {
              if ($(window).width() > 943) {
                  if ($(this).children('.menu-list').is(":visible")){
                      $(this).children('.menu-list').fadeToggle(15);
                      $(this).children('.menu-list').toggleClass('center');
                      e.preventDefault();
                  } else {
                      $('.menu-list').hide();
                      $('.menu-list').removeClass('center');
                      $(this).children('.menu-list').fadeToggle(15);
                      $(this).children('.menu-list').toggleClass('center');
                      e.preventDefault();
                  }
              }
          });

          $("body").click(function(e) {
              var target = e.target.className;
              if (target.indexOf("menu-button") == -1  ) {
                  $('.menu-list').hide();
                  $('.menu-list').removeClass('center');
                  return;
              }
          });
$(".menu > ul > li").click(function() {
              if ($(window).width() <= 943) {
                  $(this).children("ul").fadeToggle(100);
              }
          });
          //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)

          $(".menu-mobile").click(function(e) {
              $(".menu > ul").toggleClass('show-on-mobile');
              e.preventDefault();
          });
//If menu a clicked stay active
          $(".menu > ul > li > a").click(function() {
 if($( this ).hasClass( "active" )) {
                  $(this).removeClass("active");
              }else {
                  $(".menu > ul > li > a").removeClass("active");
                  $(this).addClass("active");
              }
          });
      });
  }
}