如何在单击时隐藏垂直导航并显示相应的内容（在移动网站上使用后退按钮导航）

由 发布于

有一个移动网站，该网站是作为单页应用程序构建的。我正在使用angular创建垂直导航，我想在单击的导航项上隐藏导航菜单，并使用后退按钮显示其内容以返回到导航菜单。

list.component.html遍历导航项并显示它们

<div *ngFor="let navItem of list">
           <app-nav-item [navItem]="navItem"> </app-nav-item>       
       </div>

显示每个导航项的item.component。点击导航项时，主题将触发以打开相应的内容容器组件

在内容容器组件中，我订阅了获取导航项以打开内容容器 content-container.component.ts

  subscribeToOpenContainer() {
    this.subscriptionToOpenContainer = this.navService.openNav.subscribe((navItem) => {
      this.navItem = navItem;
    }
    );
  }

content-container.html

<ul>
      <li>
        <a class="document-type-icon"><i></i></a>


      <div class="text-container">
        <p class="document-name"></p>
        <p class="last-update-date"> Last update date:</p>

        <div class="line"></div>
      </div>

      <div class="action-icons-container">

        <a class="delete-and-edit-icon"><i class="fa fa-trash"></i></a>

        <a> <i class="fa fa-edit delete-and-edit-icon> </i>
        </a>

      </div>
    </li>
<ul/>

我希望当导航项处于活动状态并且显示内容容器并带有后退按钮以返回到导航菜单时，隐藏为单个组件的导航菜单。