如何在 Angular (component.ts) 可折叠侧边栏中使用 JS 函数答案

【问题标题】：How to use JS function in Angular (component.ts) Collapsible Sidebar如何在 Angular (component.ts) 可折叠侧边栏中使用 JS 函数
【发布时间】：2022-01-01 08:13:14
【问题描述】：

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

我正在尝试将这个 JS 函数添加到 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。

非常感谢！！！

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

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

【讨论】：