如何从另一个组件切换侧导航？
当按钮/触发器与sidenav在同一个.html文件中时，它工作得很好，但如果我生成一个新组件，在我的情况下，我将它们命名为"sidebarleft"one_answers"topbar"，它就不工作了。
我所做的是生成组件来分离它们。我把sidenav放在"sidebarleft"组件中，把按钮/触发器放在"topbar"组件中。
边栏左侧组件.html
<mat-sidenav-container>
<mat-sidenav #sidenav mode="side" [(opened)]="opened" opened>
<h3>Sidenav</h3>
</mat-sidenav>
<mat-sidenav-content>
<app-dashboard></app-dashboard>
</mat-sidenav-content>
</mat-sidenav-container>
topbar.component.html
<mat-toolbar>
<button (click)="sidenav.toggle()" mat-raised-button>Toggle Sidenav</button>
</mat-toolbar>
我希望能够触发sidenav，无论我在应用程序中的哪个位置触发它。
当我按下切换按钮时，我会出现以下错误：
TopbarComponent.html:1 ERROR TypeError: Cannot read property 'toggle' of undefined
at Object.eval [as handleEvent] (TopbarComponent.html:2)
at handleEvent (core.js:43993)
at callWithDebugContext (core.js:45632)
at Object.debugHandleEvent [as handleEvent] (core.js:45247)
at dispatchEvent (core.js:29804)
at core.js:42925
at HTMLButtonElement.<anonymous> (platform-browser.js:2668)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
这是我不工作的StackBlitz代码
组件之间有三种可能的通信方式。您得到的错误是因为组件中没有sidevav属性，并且没有在未定义的成员上声明toggle函数。
有一些特定的方式可以在组件之间进行通信。
使用本机事件驱动的通信
通过输入(值(从父到子，通过输出(事件(从子到父。
//this is how to create an event emitter
@Output() toggle: EventEmitter<any> = new EventEmitter();
constructor() { }
emit() {
this.toggle.emit(null);
}
- 在TopbarComponent中添加上述代码
在AppComponent中，您绑定到切换
并且在ts文件中创建切换功能
toggle() {
this.firstSelected = !this.firstSelected;
}
然后，将第一个选定值传递给零部件，并相应地隐藏取消隐藏。
这是官方的方式。检查此解决方案工作在stackblitz这里
使用事件服务
您可以创建一个事件服务，从中可以引发事件，切换主机可以订阅这些事件并在应用程序范围内切换。例如，在这里检查
使用库通过存储共享状态
查看此处的文档