Angular 7.3.9：如何程序化触发关闭或隐藏导航栏？

嘿，针对你的Angular 7.3.9场景，我给你整理了两种可行的方案，尤其是你提到用window.open打开新URL的情况，直接隐藏导航栏确实是更高效的选择：

方案一：直接隐藏导航栏（推荐） #

这种方式不需要模拟点击，直接通过Angular的数据绑定控制导航栏的显示状态，非常适配你打开新URL后的需求：

1. 在组件类中定义控制变量
   在导航栏所属的组件（或者父组件）里添加一个布尔变量，用来控制显示状态：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-navbar',
     templateUrl: './navbar.component.html'
   })
   export class NavbarComponent {
     // 默认显示导航栏
     isNavbarVisible = true;
   
     openNewUrl() {
       // 打开目标新URL
       window.open('https://your-target-url.com', '_blank');
       // 切换状态隐藏导航栏
       this.isNavbarVisible = false;
     }
   }
   

2. 在模板中绑定显示状态
   你可以选择两种常用的Angular绑定方式：

   • 使用*ngIf（直接移除/添加DOM元素，适合不需要保留导航栏DOM的场景）：

     <nav *ngIf="isNavbarVisible" class="navbar">
       <!-- 导航栏内容 -->
       <button (click)="openNewUrl()">打开新页面</button>
     </nav>
     

   • 使用[hidden]属性（仅隐藏元素，DOM保留，适合需要快速恢复显示的场景）：

     <nav [hidden]="!isNavbarVisible" class="navbar">
       <!-- 导航栏内容 -->
       <button (click)="openNewUrl()">打开新页面</button>
     </nav>
     

如果你的导航栏是独立的子组件，还可以通过@Input()把控制变量传递过去：

// 父组件类
export class ParentComponent {
  isNavbarVisible = true;

  openNewUrl() {
    window.open('https://your-target-url.com', '_blank');
    this.isNavbarVisible = false;
  }
}

<!-- 父组件模板 -->
<app-navbar [isVisible]="isNavbarVisible"></app-navbar>
<button (click)="openNewUrl()">打开新页面</button>

// 导航栏子组件类
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
  @Input() isVisible = true;
}

<!-- 导航栏子组件模板 -->
<nav *ngIf="isVisible" class="navbar">
  <!-- 导航栏内容 -->
</nav>

方案二：程序化触发关闭按钮点击 #

如果你的导航栏已经有手动点击的关闭按钮，也可以通过代码模拟点击操作：

1. 给关闭按钮添加模板引用变量
   在导航栏模板里给关闭按钮加上#closeBtn标识：

   <nav class="navbar">
     <!-- 导航栏内容 -->
     <button #closeBtn (click)="closeNavbar()">关闭导航栏</button>
     <button (click)="openNewUrlAndClose()">打开新页面并关闭导航栏</button>
   </nav>
   

2. 在组件类中获取按钮元素并模拟点击
   使用@ViewChild获取模板引用，然后调用click()方法：

   import { Component, ViewChild, ElementRef } from '@angular/core';
   
   @Component({
     selector: 'app-navbar',
     templateUrl: './navbar.component.html'
   })
   export class NavbarComponent {
     @ViewChild('closeBtn') closeBtn!: ElementRef<HTMLButtonElement>;
   
     closeNavbar() {
       // 原本的关闭导航栏逻辑，比如修改状态或添加动画
       // ...
     }
   
     openNewUrlAndClose() {
       window.open('https://your-target-url.com', '_blank');
       // 用setTimeout确保按钮已渲染完成
       setTimeout(() => {
         this.closeBtn.nativeElement.click();
       }, 0);
     }
   }
   

小提示：如果你的导航栏是用Angular Material、NG-ZORRO等UI组件库实现的（比如MatSidenav），通常组件本身会提供close()之类的官方API，直接调用会比模拟点击更可靠哦~

内容的提问来源于stack exchange，提问作者Wilson