Question

我需要帮助我的响应式侧边栏导航，但有一个问题，我点击链接转到侧边栏导航不关闭的另一条路线。我该如何解决？以下代码供您参考：

app.component.html

<nav class="navigation">
        <div class="nav-bg"></div>
        <div class="page-container">
        <div class="logo-wrap"><a routerLink="/" id="logo"></a></div>
        <div class="menu-wrap">
                <a class="hamburger" (click)="isShown = !isShown" [ngClass]="{'open': isShown }" ><span></span></a>
        </div>
        <ul class="nav-links" 
            @showState
            *ngIf="isShown"[@showStag]>
            <a [@navState] href="#" class="nav-item" routerLink="/agency">Agency</a>
            <a [@navState] href="#" class="nav-item" routerLink="/work">Work</a>
            <a [@navState] href="#" class="nav-item" routerLink="/careers">Careers</a>
            <a [@navState] href="#" class="nav-item" routerLink="/contact">Contact</a>
        </ul>
    </div>
</nav>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { App } from './app.model';
import { AppService } from './app.service';
import { ContactService } from './app.service';
import { showStateTrigger, showStagTrigger, navListStateTrigger } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppService, ContactService, CMSService, CMSProvider],
  animations: [
    showStateTrigger,
    showStagTrigger,
    navListStateTrigger
  ]
})
export class AppComponent {
  isShown = true;

  constructor(private appService: AppService, private contactService: ContactService) {
  }

  ngOnInit() {
      }
}

Answer 1

一种方法是在链接上放置一个click事件，将isShown设置为false。

  <ul class="nav-links" @showState *ngIf="isShown"[@showStag]>
     <a [@navState] href="#" class="nav-item" routerLink="/agency" (click)="isShown = !isShown">Agency</a>
  </ul>

单击另一条路线时，响应侧导航未关闭

1 个答案: