1

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

布局.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来自 rigth 的切换是我没有实现的。我自己的左侧边栏没有切换。

那么你能帮我看看如何AdminLTE-3使用我自己的自定义切换侧边栏button吗？有什么function可以切换侧边栏菜单的吗？

4

1 回答 1

0

.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 库，它将让您的生活更轻松。

于 2021-09-18T00:12:04.120 回答