Angular：如何从侧边栏组件调用头部组件toggle方法控制侧边栏开闭

你可以通过Angular父子组件的Output事件通信来实现这个需求，具体步骤如下：

1. 在侧边栏组件（SidenavComponent）中定义输出事件 #

修改sidenav.component.ts，添加@Output装饰器的事件发射器，用来向父组件发送关闭指令：

import { Component, Output, EventEmitter } from '@angular/core';

export class SidenavComponent {
  // 定义输出事件，通知父组件执行toggle操作
  @Output() sidenavToggle = new EventEmitter<string>();

  // 侧边栏关闭按钮触发的方法
  toggle() {
    // 向父组件传递'toggle'指令
    this.sidenavToggle.emit('toggle');
  }
}

2. 更新侧边栏组件模板 #

修改sidenav.component.html中的按钮点击事件，绑定到组件内的toggle方法：

<div class="menu" id="sideNavDrawer" #sideNavDrawer>
  <div class="menu-header">
    <div class="logout">
      <button
        mat-icon-button
        class="toolbar-item"
        (click)="toggle()"
      >
        <mat-icon id="drawerButton">cancel</mat-icon>
      </button>
    </div>
  </div>
  <div class="menu-item" (click)="open('products/manage')">
    <span>Menu Link 1</span>
  </div>
  <div class="menu-item">
    <span>Menu Link 2</span>
  </div>
</div>

3. 在头部组件模板中监听侧边栏事件 #

修改header.component.html中<app-sidemenu>的事件绑定，确保匹配子组件的输出事件名：

<mat-drawer-container class="header" [hasBackdrop]="false">
  <mat-drawer #drawer mode="side" position="end" class="drawer">
    <!-- 绑定子组件的sidenavToggle事件到父组件的toggle方法 -->
    <app-sidemenu (sidenavToggle)="toggle($event)"></app-sidemenu>
  </mat-drawer>
  <mat-drawer-content>
    <mat-toolbar color="primary" class="toolbar">
      <span class="title-text" (click)="open('/home')">My Website Title</span>
      <app-navmenu></app-navmenu>
      <button
        mat-icon-button
        class="toolbar-item"
        (click)="toggleDrawer()"
      >
        <mat-icon id="drawerButton">menu</mat-icon>
      </button>
    </mat-toolbar>
  </mat-drawer-content>
</mat-drawer-container>

原理说明 #

• 侧边栏组件通过@Output创建事件发射器，点击关闭按钮时触发事件并传递指令。
• 头部组件作为父组件监听该事件，接收到指令后调用自身的toggle方法，控制侧边栏的开闭状态。

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