如何在另一个组件中切换mat-sidenav？

Question

我想通过单击菜单图标(在header组件中)来切换side-nav(在抽屉组件中)。我尝试过使用服务；但这两个组件之间没有共享服务状态。

演示在这里https://stackblitz.com/edit/angular-11pdkj

Answer 1

Angular提供了非常强大的Input, Output概念。请考虑使用Input, Output and EventEmitter，您可以将事件从一个组件反弹到另一个组件。

请看一下这张demo link。

// drawer.component.ts
export class DrawerComponent implements AfterViewInit, OnChanges {
  @ViewChild('sidenav') public sidenav: MatSidenav;

  @Input()
  openNav: boolean;

  ngOnChanges(): void {
    console.log('ngOnChanges', this.openNav);
    if (this.openNav) {
      this.sidenav.open();
    } else {
      this.sidenav.close();
    }
  }
}

// header.component.ts
export class HeaderComponent implements OnInit {
  title: string = "Dashboard";

  @Output()
  open: EventEmitter<boolean> = new EventEmitter();

  clickMenu() {
    this.open.emit(true);
  }
}

// layouts.component.html
<div class="app-wrapper">
  <app-drawer [openNav]="isOpen"></app-drawer>
  <app-header (open)="navOpen($event)"></app-header>
<div>

// layouts.component.ts
export class LayoutsComponent implements OnInit {

  isOpen: boolean;
  navOpen($event): void {
    this.isOpen = !this.isOpen;
    console.log('navOpen', $event);
  }
}

如果需要，也可以使用相应的组件生命周期挂钩。

Answer 2

您应该使用@Input和@Output装饰器以及EventEmitter将事件从一个组件发送到另一个组件。我已经修复了你的代码，请查看：stackblitz

Answer 3

我没有在服务中设置sidenav，而是在sidenav需要切换时将服务转换为通知程序，从而解决了这个问题。因此，当你点击这个按钮时，服务会告诉一个行为主体发出它对DrawerComponent的更改。此组件订阅ngOnInit中的behaviour主题。并且当服务向组件通知切换时切换sidenav。

下面的StackBlitz展示了我是如何修复代码的：https://stackblitz.com/edit/angular-mgm4xn