Question

我有一个带有mat-toolbar的标题组件，其中有一个按钮，我想使用它来切换另一个组件中的sidenav栏。如何在其他组件中切换侧边栏？

我想将其切换到标题组件下方。

https://stackblitz.com/edit/angular-adkpkv

我在这里复制了我的整个项目，但是我似乎无法使其在stackbitz中运行。不过它确实在本地运行。

Answer 1

您必须在下面对现有的stackblitz进行一些更改，

从header.component中抽出（汉堡菜单中的）每次点击
在app.component（父级）中接收此值并传递给子级
在side-nav.component（子级）中处理此点击

进行这些更改并查看从一个组件到另一个组件的切换...我在孩子内部添加了一个<mark>标签，以检查该位置确实收到了该值。

将您的 header.component.ts 更改为：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @Output() menuState = new EventEmitter();

  constructor() { }
  opened: boolean;
  showMenu = false; /* false by default, since hidden */
  toggleMenu() {
      console.log("inside toggleMenu");
      this.showMenu = !this.showMenu;
      this.menuState.emit(this.showMenu);
   }
  ngOnInit() {
  }

}

您的 header.component.html 为：

<mat-toolbar>
    <mat-toolbar-row>
        <a href="" class="site-logo">
            <h2>TEST APP</h2>
        </a>
        <button mat-icon-button (click)="toggleMenu()"> 
              <mat-icon>menu </mat-icon>
          </button>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon"  matBadge="15" matTooltip="Recent changes">notifications</mat-icon>
      <mat-icon class="example-icon"  matTooltip="Info or how to contact us">help</mat-icon>
      <mat-icon class="example-icon"  matTooltip="Your account information"> account_circle</mat-icon>
    </mat-toolbar-row>

</mat-toolbar>

您的 app.component.ts 为：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'This is the copy of the Expense App';
  subMenuState:boolean = false;
  burgerClicked(evnt){
    this.subMenuState = evnt;
    console.log("inside burgerClicked: pls. change showMenu to be:",this.subMenuState);
  }

}

您的 app.component.html 为：

<h1>{{title}}</h1>
<app-header (menuState)='burgerClicked($event)'></app-header>
<app-side-nav [subMenuState]="subMenuState"></app-side-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

您的 side-nav.component.ts 为

import { Component, OnInit, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.css']
})
export class SideNavComponent implements OnInit, OnChanges {
  @Input() subMenuState;
  constructor() { }
  opened: boolean;
  showMenu = true;
  toggleMenu() {
      this.showMenu = !this.showMenu;
   }
  ngOnInit() {
  }

  ngOnChanges(){
    console.log("inside ngOnChanges with subMenuState: ",this.subMenuState );
    this.showMenu = this.subMenuState;
  }

}

在您的 side-nav.component.html 中，我在顶部添加了一行以确保值正确切换

<mark> Show menu (inside side-nav.component) ? {{showMenu}} </mark>
<mat-sidenav-container >
  <mat-sidenav #sidenav mode="side"  mat-disable-backdrop #start >
      <mat-nav-list>
          <a mat-list-item routerLink="/">  
              <mat-icon> home</mat-icon>
              <span> All Reports </span>
          </a>
          <a mat-list-item routerLink="/entries">  
              <mat-icon>  assignment </mat-icon>
              <span> Reports Per Business </span>
          </a>
          <a mat-list-item (click)="toggleMenu()">
                  <mat-icon mat-list-icon>business</mat-icon>Maintenance
                  <mat-icon *ngIf="!showMenu">chevron_right</mat-icon>
                  <mat-icon *ngIf="showMenu">expand_more</mat-icon>
                </a>
                <mat-nav-list class="sidenav-submenu" *ngIf="showMenu">
                  <a mat-list-item  routerLink="/new-entry"> New Report</a>
                  <a mat-list-item > New User</a>
                  <a mat-list-item > New Business</a>
                </mat-nav-list>
                <a mat-list-item >  
                      <mat-icon> account_circle</mat-icon>
                      <span> Login </span>
                  </a>
      </mat-nav-list>

  </mat-sidenav>

</mat-sidenav-container>

Answer 2

几周前我遇到了同样的问题，并且偶然发现了这篇对我有很大帮助的文章。它解释了组件如何通过切换侧边栏进行通信：）

https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

干杯！

如何在其他组件中切换边栏？

2 个答案: