css - 通过 Angular 路由器导航后导航不关闭

Question

我在我的 Angular 应用程序中添加了汉堡包导航。问题是，当我通过导航从路由器导航时，navdiv 卡住并且不会自动关闭。我在没有使用 jquery 的情况下使用 CSS 创建了它。应该如何纠正它我需要在我的导航 Controller 文件中添加一些 js 代码。附上屏幕截图以便更好地理解问题。

屏幕 1 组件:主页

屏幕 2 组件:收据(Nav Div 卡住。无法关闭)

NAV.COMPONENT.HTML

<header tabindex="0">
  <h4>{{ pagename }}</h4>
  <a (click)="winBack()">Back</a>
</header>
<div id="nav-container">
  <div class="bg"></div>
  <div class="button" tabindex="0">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
  <div id="nav-content" tabindex="0">
    <ul>
      <li *ngFor="let nav of navs; let i = index">
        <a (click)="route(i)"><i :class="{{nav.fa}}"></i>&nbsp; {{nav.name}}</a>
      </li>
      <li><a routerLink="/app1/three"><i class="fa fa-camera"></i>&nbsp; Scanner</a></li>
      <li style="margin-top:15px;"><a><i class="fa fa-user"></i>&nbsp; {{ logname }}</a>
      <li (click)="logOut()"><a><i class="fa fa-sign-out"></i>&nbsp; Logout</a></li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet>

NAV.COMPONENT.TS(仅路由部分)

  route(i){
    console.log(i)
    if (i == 0) this.router.navigate(["/app1/home"])
    else if (i == 1) this.router.navigate(["/app1/receipt"])
    else if (i == 2) this.router.navigate(["/app1/issue"])
    else if (i == 3) this.router.navigate(["/app1/transfer"])
    else if (i == 4) this.router.navigate(["/app1/summary"])
  }

NAV.COMPONENT.CSS

#nav-container {
  position: fixed;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index:99;
  top:0;
}
#nav-container .bg {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: calc(100% - 60px); /* Full height (cover the whole page) */
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6); /* Black background with opacity */
  cursor: pointer; /* Add a pointer on hover */
}
#nav-container:focus-within .bg {
  display:block;
  opacity: .6;
  pointer-events: none;
}
#nav-container * {
  visibility: visible;
}

.button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  height: 60px;
  width: 30px;
  cursor: pointer;
  pointer-events: auto;
  margin-left: 20px;
  touch-action: manipulation;
  color:#fff;
  outline:0;
}
.icon-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  transition: .3s;
}
.icon-bar + .icon-bar {
  margin-top: 5px;
}

#nav-container:focus-within .button {
  pointer-events: none;
}
#nav-container:focus-within .icon-bar:nth-of-type(1) {
  transform: translate3d(0,8px,0) rotate(45deg);
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {
  opacity: 0;
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {
  transform: translate3d(0,-8px,0) rotate(-45deg);
}

#nav-content {
  margin-top: 60px;
  padding-left: 0;
  width: 90%;
  max-width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  background: #fff;
  pointer-events: auto;
  transform: translateX(-100%);
  transition: transform .3s;
  will-change: transform;
  contain: paint;
  overflow: hidden;
}

#nav-content ul {
  height: 100%;
  float:left;
  margin-left:-30px;
  list-style-type: none;
}
#nav-content ul li {
  border-bottom: 1px solid #e4e4e4;
  padding:1px;
}
#nav-content li a {
  padding: 7px 2px;
  display: block;
  transition: color .1s;
  color:#000;
  cursor:pointer;
  text-decoration: none;
}

#nav-content li a:hover {
  color: #cd0000;
  text-decoration: none;
}

#nav-content li:not(.small) + .small {
  margin-top: auto;
}

#nav-container:focus-within #nav-content {
  transform: none;
}

Answer 1

你可以使用ngIf来显示隐藏你的导航div

<div id="nav-container" *ngIf="isNavOpened">

然后在你的组件中

isNavOpened=true;

route(i){
this.isNavOpened=false;
}

或者，如果您不想使用 ngif

，您也可以为此使用一些条件类