如何在angular12中手动切换管理LTE3侧边栏？

Question

我已经在我的项目中实现了Admin LTE 3主题。

layout.html

<div class="wrapper w-100">
<!-- Navbar -->
<app-header></app-header>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<app-sidebar></app-sidebar>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <router-outlet></router-outlet>
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<app-control-sidebar></app-control-sidebar>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<!-- <app-starter-footer></app-starter-footer> -->

sidebar.component.html

<aside class="main-sidebar sidebar-light-primary sidebar-no-expand" (mouseover)="removeCollapse($event)">
<!-- Brand Logo -->
<a href="/" class="brand-link border-0"> <span class="brand-text p-3 cl-font-weight-600">Logo</span> </a>
<!-- Sidebar -->

 // rest of the content here 

header.component.html

<nav class="main-header navbar navbar-expand navbar-white navbar-light border-0">
<!-- Left navbar links -->
<ul class="navbar-nav align-items-center">
    <li class="nav-item"> <a class="nav-link h-auto" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li>
    <li class="nav-item d-none d-sm-inline-block"> <a href="/" class="nav-link nav-heading cl-font-weight-600 py-1">Discover</a> </li>
</ul>
<ul class="navbar-nav text-center mobile-logo">
    <li class="w-100">
        <p class="mb-0">Logo</p>
    </li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav align-items-center">
    <li class="nav-item">
        <a class="nav-link explainer-link d-flex" href="#"> <img src="assets/img/play-button.png" alt="" class="img-fluid">
            <p class="mb-0 ml-2">Explainer video</p>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link message-link d-flex align-items-center" href="#">
            <p class="message-text cl-anchor mb-0">Ask To Help</p> <img src="assets/img/message-img.png" alt="" class="img-fluid ml-2"> </a>
    </li>
</ul>

<div class="sidebar">

现在的问题是，如果我点击Admin LTE提供的主题切换按钮，菜单切换就可以正常工作。但是如果我想把侧边栏折叠到我自己的按钮上，就不能正常工作了

<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>

如果我尝试了上面提到的anchor tag方法，那么toggle sidebar的另一个sidebar就是切换，但我并没有实现。我自己的左边栏没有切换。

那么，您能帮助我解决如何使用自己的自定义button切换AdminLTE-3侧边栏的问题吗？有没有可以切换侧边栏菜单的function？

Answer 1

.html：

<a id="my-toggle-button" class="nav-link" data-widget="control-sidebar" (click)="toggleSideBar()">Toggle Control Sidebar</a>

.ts：

toggleSideBar() {
  $("#my-toggle-button").ControlSidebar('toggle');
}

基于https://adminlte.io/docs/3.0/javascript/control-sidebar.html的文档

老实说，您应该在这里使用@ViewChild来访问HTML元素，但是您可能会受到您选择的库的限制。

但说真的，我说真的！对于仪表板来说，这个库是一个非常糟糕的选择。它是老牌的，专注于jQuery。你想要为Angular量身定做的东西。看看https://akveo.github.io/ngx-admin/吧。

根据https://risingstars.js.org/2020/en#section-angular的说法，ngx-admin是排名第一的Angular库，它会让你的生活变得更轻松。