在 angular 組件中未觸發 show.bs.collapse 事件

Question

因此，我有一個自定義導航欄切換器效果來顯示單擊漢堡包的時間。但令人討厭的是，它不適用於 angular 組件，但在簡單的非 angular 網站上運行良好。

這是我在home.component.ts中的代碼，並且在ngOnInit方法中。

它的主體和元素沒有問題，JQuery 一切正常，但是當我點擊漢堡包時，navbarCollapse.on('show.bs.collapse) 事件不會觸發。 在 angular 組件中捕獲 bootstrap4 事件是否存在一些問題？ show.bs.collapse是一個引導事件。

var body = $('#mainbody');
var navbar = $('.navbar');
var navbarCollapse = $('.navbar-collapse');

// Add the needed HTML elements for the plugin to work. 
// All the elements are styled in navbar-sidemnu.css.

body.append('<div class="side-menu-overlay"></div>');
var overlay = $('.side-menu-overlay');
console.log(overlay);

body.append('<div id="side-menu"></div>');
var sideMenu = $('#side-menu');

console.log(sideMenu);

sideMenu.append('<button class="close"><span aria-hidden="true">×</span></button>')
var sideMenuCloseBtn = sideMenu.find('.close');

sideMenu.append('<div class="contents"></div>')
var sideMenuContents = sideMenu.find('.contents');

// Configure Slide menu direction
if (navbar.hasClass('better-bootstrap-nav-left')) {
  sideMenu.addClass('side-menu-left');
}

// This event is trigerred when the user clicks the navbar toggle button.
navbarCollapse.on('show.bs.collapse', function (e) {
  // Stop the default navbar behaviour (don't open the collapse navigation).
  e.preventDefault();
  alert("clicked hamburger!");
  // Instead we copy the navbar contents and add them to our side menu.
  var menuContent = $(this).html();
  sideMenuContents.html(menuContent);

  // Animate the side menu into frame.
  slideIn();
});


// Hide the menu when the "x" button is clicked.

sideMenuCloseBtn.on('click', function (e) {
  e.preventDefault();
  slideOut();
});

// Hide the menu when the overlay element is clicked.

overlay.on('click', function (e) {
  slideOut();
});

// Listen for changes in the viewport size.
// If the original navbar collapse is visible then the nav is expanded.
// Hide/Show the menu accordingly.

$(window).resize(function () {
  if (!navbarCollapse.is(":visible") && body.hasClass('side-menu-visible')) {
    sideMenu.show();
    overlay.show();
  }
  else {
    sideMenu.hide();
    overlay.hide();
  }
});

function slideIn() {
  body.addClass('overflow-hidden');
  sideMenu.show();
  setTimeout(function () {
    body.addClass('side-menu-visible');
    overlay.fadeIn();
  }, 50);
}

function slideOut() {
  body.removeClass('side-menu-visible');
  overlay.fadeOut();
  setTimeout(function () {
    sideMenu.hide();
    body.removeClass('overflow-hidden');
  }, 400);
}

Answer 1

這是通過將 js 放入可注入服務並在我的組件中使用來解決的。