Javascript Viewchild未定义材质角垫SIDENAV

我使用的是带角度的材质，我想使用viewchild从另一个组件切换Sidenav，但是当我尝试获取mat Sidenav元素时，我没有定义。这是mi代码

sidenav.component.html

<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav class="example-sidenav">
       Sidenav content goes here!
    </mat-sidenav>

    <div class="sidenav-container">
        123
    </div>
</mat-sidenav-container>

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <div class="navbar-brand">
        <img class="img-fluid" src="./assets/icons/logo_femsa_blanco.png"/>
    </div>
    <button class="buton-menu" mat-icon-button (click)="openSideNav()">
        <img class="img-fluid menu-icon" src="./assets/icons/icons8-menu-filled-50.png"/>
      </button>
    <span class="toolbar-spacer"></span>
    <div class="font-weight-light text-right user-name">
        Hola Mundo!
    </div>
  </mat-toolbar-row>
</mat-toolbar>

这是我尝试切换sidenav的组件

标题.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatSidenav} from '@angular/material/sidenav';

@Component({
  selector: 'app-sidemenu',
  templateUrl: './sidemenu.component.html',
  styleUrls: ['./sidemenu.component.scss']
})
export class SidemenuComponent implements OnInit {
  @ViewChild('sidenav') sidenav;
  constructor() { }

  ngOnInit() {
  }

  openSideNav(){   
    console.log(this.sidenav)
    this.sidenav.open();
  }
}

import { Component, OnInit } from '@angular/core';
import { SidemenuComponent } from '../sidemenu/sidemenu.component';
@Component({
  providers:[SidemenuComponent],
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor(private sm: SidemenuComponent) { }

  ngOnInit() {
  }

  openSideNav(){ 
    this.sm.openSideNav()


    }
}

header.component.html

<mat-sidenav-container class="example-container">
    <mat-sidenav #sidenav class="example-sidenav">
       Sidenav content goes here!
    </mat-sidenav>

    <div class="sidenav-container">
        123
    </div>
</mat-sidenav-container>

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <div class="navbar-brand">
        <img class="img-fluid" src="./assets/icons/logo_femsa_blanco.png"/>
    </div>
    <button class="buton-menu" mat-icon-button (click)="openSideNav()">
        <img class="img-fluid menu-icon" src="./assets/icons/icons8-menu-filled-50.png"/>
      </button>
    <span class="toolbar-spacer"></span>
    <div class="font-weight-light text-right user-name">
        Hola Mundo!
    </div>
  </mat-toolbar-row>
</mat-toolbar>

你好，蒙多！

---

希望有人能帮忙。我从角度开始。很抱歉英语不好

基于您的示例，我创建了一个服务来管理组件之间的通信

目标是在代码的任何地方都有API来请求菜单打开/关闭/切换

功能步骤：

1/从任何地方（点击按钮、定制物品），您都可以在侧导航上进行操作。您可以从服务中调用公共函数，例如：

this.menuService.open（）

2/如果需要，您的服务将通过Observable进入下一个新的菜单状态

3/管理sidenav的组件将订阅此状态的任何更改，并在需要时执行“打开/关闭”

---

状态由主题和内部服务标志管理

export class MenuService {
    private menuIsOpen$ : Subject<boolean>;
    private menuIsOpen: boolean = false;
    constructor() { 
        this.menuIsOpen$ = new Subject<boolean>();
    }

    /**
    * If menu is open, let close it
    **/
    public open() {
            if(!this.menuIsOpen) {
                this.menuIsOpen = true;
                this.menuIsOpen$.next(false);
            }
    }
    /**
     * Both silence open and close is use by navbar output, to silence switch internal flag.
     **/
    public silenceOpen() {
        this.menuIsOpen = true;
    }
    public silenceClose() {
        this.menuIsOpen = false;
    }

    /**
    * If menu is close, let open it
    **/
    public close() {
            if(this.menuIsOpen) {
                this.menuIsOpen = false;
                this.menuIsOpen$.next(false);
            }
    }

    public toggle() {
        this.menuIsOpen = !this.menuIsOpen;
        this.menuIsOpen$.next(this.menuIsOpen);
    }

    public asObservable() 
    {
        return this.menuIsOpen$.asObservable();
    }
}

Html端：

---

示例：

官方示例：您有完整的api来切换mat工具栏，我使用此示例：但我不知道我做错了什么，我无法理解您的问题，以及您的组件关系，请提供stackblitz示例，如我制作的示例：太感谢您了，我建议您始终考虑在需要跨组件/模块/指令通信时创建服务，并将所有可变状态视为可观察的。