我想通过单击菜单图标(位于标题组件中)来切换(在抽屉组件中)侧面导航。我已经尝试过使用服务;但是这两个组件之间没有共享服务状态。
答案 0 :(得分:0)
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);
}
}
还根据需要使用相应的组件生命周期挂钩。
答案 1 :(得分:0)
您应该使用@Input
和@Output
装饰器以及EventEmitter
将事件从一个组件发送到另一个组件。
我已经修正了您的代码,
请检查一下:
stackblitz
答案 2 :(得分:0)
我通过不设置服务中的sidenav来解决此问题,而是在需要切换sidenav时将服务变成通知程序。因此,当您单击该按钮时,该服务将告知要发出的行为对象,它就是对DrawerComponent的更改。该组件订阅ngOnInit中的行为主题。并在服务通知切换组件时切换sidenav。
以下StackBlitz显示了我如何修复代码:https://stackblitz.com/edit/angular-mgm4xn