如何在 Angular (component.ts) 中使用 JS function

Question

我正在尝试折叠 Angular 项目中已经存在的边栏。 侧边栏在 app.component.html 中实现。 我正在尝试使其成为自己的组件。

我正在尝试将此 JS function 添加到 sidebar.component.ts 文件中。

{
  const sideBar = document.querySelector('.side-bar');
  const arrowCollapse = document.querySelector('#logo-name__icon');
  sideBar.onclick = () => {
    sideBar.classList.toggle('collapse');
    arrowCollapse.classList.toggle('collapse');
    if (arrowCollapse.classList.contains('collapse')) {
      arrowCollapse.classList =
        'bx bx-arrow-from-left logo-name__icon collapse';
    } else {
      arrowCollapse.classList = 'bx bx-arrow-from-right logo-name__icon';
    }
  };
}

我需要能够关闭侧边栏，以便在图标旁边不再显示全文，而只显示图标。

我正在关注本指南，它最终应该看起来像这样： https://www.cssscript.com/smooth-collapsible-sidebar-navigation/

但我无法让 JS 工作。 在我实施它之前，我首先检查这是否可行。 我不允许使用 Jquery/Alpine.js 或其他外部库。 我们使用的是 Tailwind 而不是 Bootstrap。

十分感谢！！！

Answer 1

您应该考虑使用 *ngIf 来切换某些元素，而不是使用 DOM object。