关闭滚动菜单当URL更改Angular 13

Question

对于我的Angular项目，我有一个下拉菜单供用户在他的个人资料上导航，我希望该下拉菜单在页面更改时关闭，我尝试使用naverof navigationstart，但我仍然没有找到问题，所以这里是我的基本代码：

header.component.ts

click: boolean = false
open: boolean = false;
currentUrl = this.router.url

constructor (private route: ActivatedRoute, private router: Router) {}

openMenu() {
  if(this.open === true){
    this.open = false
  }else {
    this.open = true
  }

}

和我的header.component.html

 <div (click)="openMenu()" class="circle">
    <img src="../../../../assets/avatar/Avatar-Donkey.png" alt="">
</div>
<div [ngClass]="open ? 'isOpen' : 'isClose'" class="scrolling-menu">
    <nav>
        <ul>
            <li> <a routerLink="private/dashboard">Mon profil</a> </li>
            <li> <a>Deconnexion</a> </li>
        </ul>
    </nav>
</div>

您对URL更改时如何处理关闭菜单有任何想法吗？谢谢

Answer 1

收听下拉菜单上的点击事件

<div (click)="openMenu()" class="circle">
    <img src="../../../../assets/avatar/Avatar-Donkey.png" alt="">
</div>
<div [ngClass]="open ? 'isOpen' : 'isClose'" class="scrolling-menu">
    <nav>
        <ul>
            <li (click)="navigateToThePage('private/dashboard')"> 
    <a =>Mon profil</a> </li>
            <li> <a>Deconnexion</a> </li>
        </ul>
    </nav>
</div>

，然后在组件中

public openMenu(): void {
  this.open = this.open !== true;
}

public navigateToThePage(url: string): void {
    this.openMenu();
    this.router.navigate([url]);
}