Angular - меню не работает в IE и Firefox

Question

Я работаю с меню Javascript, которое загружает onInit в мое угловое приложение, оно отлично работает в Chrome, но не в IE Edge и Firefox.

Код в моем файле машинописи был:

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

Итак, после отладки я попал в точку, где, как мне кажется, я нашел решение - добавление прослушивателя событий вместо документа.готово.

Теперь все становится непонятно, если я добавлю 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

Вы уже работаете с ловушкой жизненного цикла OnInit.Angular вызывает различные хуки жизненного цикла, когда компонент создается / обновляется / уничтожается и позволяет вам воздействовать на события.Платформа Angular гарантирует, что эти события работают во всех основных браузерах.В вашем случае вам не нужно использовать какой-либо отдельный приемник событий в методе ngOnInit, вы можете использовать метод ngOnInit или ngAfterViewInit, чтобы выполнить всю работу, необходимую при создании компонента.Для получения дополнительной информации вы можете прочитать о угловых крюках жизненного цикла здесь .

Answer 2

Я знаю Хагнера, я всегда работаю с onInit и работает нормально, в этом случае я думаю, что я запускаю раннюю функцию JS на init.Позвольте мне сформулировать это следующим образом:

Когда я захожу, я захожу на панель инструментов, это значит;ip: port / dashboard теперь я даю вам это: он работает в любом браузере, если я перезагружаю страницу в ip: port / почему ??

(не работает в IE, если я нажму f5 (ip: port / dashboard), только если я перенаправляю на ip: port /

, вот мой код 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

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
}

Не совсем точно, чего вы хотите достичь, каково ваше условие или какой код вы хотите выполнить, когда условие выполнено, ноза такой схемой задержки выполнения кода легко следовать, если вы знаете, каково условие.