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

Question

我正在使用在我的角度应用程序上加载onInit的Javascript菜单，它在Chrome上可以正常运行，但在IE Edge和Firefox上却不能。

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

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上运行，而在IE上则不起作用。 但是如果我改变了：

 window.addEventListener('load', function () 

至

 window.addEventListener('focus', function () 

正如我第一次说的那样，在刷新页面后，它不适用于Firefox和chrome（子菜单轻弹），但适用于IE。

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

Answer 1

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
}

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

Answer 2

我知道哈格纳，即时通讯总是与onInit一起工作，并且工作正常，在这种情况下，我认为即时启动init的JS函数。 让我这样说：

当我登录时，我转到仪表板，这意味着； ip：port / dashboard现在，我给您这个：如果我将页面重新加载到ip：port /，为什么它可以在每个浏览器上使用？为什么？

（仅当我重新加载到ip：port /时，如果我按f5键（在IP：port / dashboard上，则无法在IE上运行）

这是我的tipescript代码：它包含推入并生成菜单的所有代码，以及单击菜单，子菜单以及在内部还是外部单击的所有代码。

menu.compontent.ts：

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");
              }
          });
      });
  }
}

Answer 3

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