Question

我正在使用Javascript菜单，该菜单在我的角度应用程序上加载onInit，它在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键并重新加载页面而不登录，则它仅在Firefox上有效。工作。但是如果我改变了：

 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

我知道hagner，即时通讯始终与onInit一起使用，并且运行良好，在这种情况下，我认为即时启动init的JS函数会比较早。让我这样说：

登录后，我进入仪表板，这意味着； ip：端口/仪表板现在我给你这个：如果我将页面重新加载到ip：port /，它可以在每个浏览器上运行为什么？？

（仅当我重新加载到ip：port /

时，如果我按f5键（在IP：端口/仪表板上），则在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生命周期挂钩here。

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

3 个答案: