使用Angular Material在单独的组件中切换Sidenav

Question

我正在尝试使用Angular Material切换sidenav。 sidenav在一个单独的组件中，我无法切换它。我遵循了Angular Material文档，但是他们没有使用sidenav作为单独的组件。我无法在互联网上找到解决方案。如果有人可以帮助，我将不胜感激。

目录结构

layout.component.html

<app-navbar (toggleNav)="sideNav.toggle()"></app-navbar>
<mat-sidenav-container autosize>
    <app-sidebar #sideNav></app-sidebar>
    <mat-sidenav-content role="main">
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

navbar.component.html

<mat-toolbar color="primary" class="shadow bg-primary">
    <mat-toolbar-row class="bg-primary">
        <button mat-icon-button (click)="sideNavToggle()" class="btn btn-no-border text-white pr-3"><mat-icon>menu</mat-icon></button>
        <a class="navbar-brand text-white" href="#"><img src="../../../../assets/images/logo1.png" alt="UMT" height="50px" width="50px"/><span class="pl-4">University</span></a>

        <!-- This fills the remaining space of the current row -->
        <span class="example-fill-remaining-space"></span>
        <div fxFlex fxLayout fxLayoutAlign="flex-end">
            <ul  fxLaoyout fxLayoutGap="20px" class="navbar-nav ml-auto">
                <li class="nav-item avatar dropdown">
                    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu" class="btn btn-no-border nav-link dropdown-toggle text-white">          
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" alt="" class="img-fluid rounded-circle" height="50px" width="50px">
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item>Jhon</button>
                        <button mat-menu-item>Account Settings</button>
                        <button mat-menu-item>Change Password</button>
                        <button mat-menu-item>Log out</button>
                    </mat-menu>
                </li>
            </ul>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

navbar.compoent.ts

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

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    @Output() toggleNav = new EventEmitter<boolean>();

    constructor() { }

    ngOnInit() {
    }

    sideNavToggle(){
        this.toggleNav.emit(true);
    }

}

sidebar.component.html

<mat-sidenav  mode="side" opened class="sidenav">
    <mat-toolbar>
        <mat-toolbar-row>
            <h2 class="toolbar-title"> SideBar </h2>
        </mat-toolbar-row>
    </mat-toolbar>
</mat-sidenav>