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

我想通过单击菜单图标（在标题组件中）来切换侧导航（在抽屉组件中）。我试过使用服务；但是服务状态在这两个组件之间不共享

---

这里的演示提供了非常强大的输入、输出概念。 请考虑使用<代码>输入、输出和EventEmitter < /代码> 使用这一切，您可以将事件从一个组件反弹到另一个组件

请看看这个

//drawer.component.ts
导出类抽屉组件在ViewInit、OnChanges之后实现{
@ViewChild（“sidenav”）公共sidenav:MatSidenav；
@输入（）
openNav：布尔型；
ngOnChanges（）：void{
log（'ngOnChanges'，this.openNav）；
if（this.openNav）{
this.sidenav.open（）；
}否则{
this.sidenav.close（）；
}
}
}
//header.component.ts
导出类HeaderComponent在Init上实现{
标题：string=“Dashboard”；
@输出（）
打开：EventEmitter=新的EventEmitter（）；
单击菜单（）{
this.open.emit（true）；
}
}
//layouts.component.html
//布局.component.ts
导出类布局组件实现OnInit{
等参：布尔；
navOpen（$event）：无效{
this.isOpen=！this.isOpen；
console.log（'navOpen'，$event）；
}
}

---

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

您应该使用

@Input

和

@Output

装饰器和

EventEmitter

将事件从一个组件发送到另一个组件。 我已经修正了你的密码， 请查看：

---

我解决了这个问题，没有在服务中设置sidenav，而是在sidenav需要切换时将服务转换为通知程序。因此，当您单击该按钮时，服务会通知行为主体将其更改发送到抽屉组件。此组件订阅ngOnInit中的行为主题。并在服务通知组件切换时切换sidenav

---

下面的StackBlitz显示了我是如何修复您的代码的：

问题的发生是因为vscode没有检查html关闭标记，Angular也没有在模板中检查此错误。

// 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);
  }
}