Angular - 侧边栏导航答案

【问题标题】：Angular - Sidebar NavigationAngular - 侧边栏导航
【发布时间】：2020-05-12 03:06:18
【问题描述】：

我正在尝试从左侧导航创建一个幻灯片，而不是传统的引导程序在折叠时向下滑动导航。

切换按钮的 HTML

<button id="collapseBtn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleSideBar()" >
Toggle</button>

侧边栏的 HTML

<div class="sidebar">
  <ul>
      <li>S-Dashboard</li>
      <li>S-Voucher</li>
  </ul>
</div>

侧边栏的 CSS

.sidebar {
   background: #1a2580;
   color: white;
   height: 100%;
   width: 0;
   position: fixed; 
   z-index: 1;
   top: 0;
   left: 0;
   overflow-x: hidden;
   padding-top: 60px;
   transition: 0.5s; 
}
.showsidebar {
   width: 250px;
}
.hidesidebar {
   width: 0px;
}

组件文件中的ToggleSideBar函数

toggleSideBar() {
   document.getElementsByClassName('sidebar')[0].classList.add('showsidebar');
   this.sideBarOpen = true;
}

单击切换按钮会根据需要滑出导航，但不会将内容推到右侧。结果，内容隐藏在侧边栏下方。

如何将内容推送到右侧？

其次，我尝试在单击页面上的任何位置时使用 HostListener 关闭侧边栏，但这似乎不起作用。

StackBlitz Link

【问题讨论】：

您不想使用角材料material.angular.io/components/sidenav/overview的任何具体原因？
@kuldeep 没有具体原因。在您的建议尝试找到一个顶部固定导航和侧导航折叠的示例之后。在角材料中也找不到任何东西。
好吧，如果我没记错的话，你可以通过工具栏（角度材料）和角度侧导航来实现。我稍后会提供一个示例！！

标签： css angular typescript angular-bootstrap

【解决方案1】：

您可以在body 元素上切换一个类，当您切换侧边菜单时，该类应该负责移动（推送）整个页面内容。

styles.css

body { 
  position: relative;
  overflow: hidden;
  transition: left 0.5s ease; /* Animation styles are just for demo */
  left:0;
}

body.push {
  left:250px;
}

在你的组件中：

import { Component, OnInit, HostListener, ElementRef } from '@angular/core';


@Component({
  selector: 'app-topnav',
  templateUrl: './topnav.component.html',
  styleUrls: ['./topnav.component.css']
})
export class TopnavComponent implements OnInit {

  isMenuSmall:boolean = true;
  sideBarOpen: boolean = false;
  constructor(private el:ElementRef) { }

 // Your initial click listener on the host element
 @HostListener('click', ['$event'])onClick(event) {
      event.stopPropagation();
   if (event.target.id == "collapseBtn") {
      document.getElementsByClassName('sidebar')[0].classList.add('showsidebar');
      document.body.classList.add('push');
      this.sideBarOpen = true;
   } else {
    if (this.sideBarOpen) {
       document.getElementsByClassName('sidebar')[0].classList.remove('showsidebar');
       document.body.classList.remove('push');
       this.sideBarOpen = false;
    }
   }
 }

  // Click listener on the window object to handle clicks anywhere on 
  // the screen.
  @HostListener('window:click', ['$event']) onOutsideClick(event){
    if(this.sideBarOpen && !this.el.nativeElement.contains(event.target)){
      this.sideBarOpen=false;
      document.getElementsByClassName('sidebar')[0].classList.remove('showsidebar');
      document.body.classList.remove('push');
    }
  }

  ngOnInit() {
  }
  toggleSideBar() {
  }

}

当然，上面的代码还可以进一步增强，但我希望它向您展示了您想要实现的目标的方法。

【讨论】：