javascript - Viewchild undefined with material angular matsidenav

Question

我正在使用带 Angular Material ，我想使用 viewchild 从另一个组件切换 Sidenav，但是当我尝试获取 mat-sidenav 元素时，我得到了未定义。这是我的代码

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>

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

这是我尝试切换 sidenav 的组件

header.component.ts

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-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>

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

Answer 1

根据您的示例，我创建了服务来管理组件之间的通信。

目标是在您的代码的任何位置拥有 API 来请求菜单打开/关闭/切换。

功能步骤:

1/从任何地方(点击按钮、自定义事物)，您想在侧边导航上进行操作。您从您的服务中调用公共(public)函数，例如:this.menuService.open()

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

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

---

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

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

然后是嵌入 sidenav 的组件:

export class SidemenuComponent implements OnInit {

    @ViewChild('sidenav') sidenav: MatSidenav;

    constructor(private menuService: MenuService) 
    {

    }

    ngOnInit() {
        /**
        When you reveive order to open / close sidenav.
        **/
        this.menuService.asObservable().subscribe((isOpen: boolean) => {
                    if(isOpen) {
                        this.sidenav.close();
                    }
                    else{
                        this.sidenav.open();
                    }
            });
    }

    onOpenedChange() {
        this.menuService.silenceOpen();
    }
    onClosedChange() {
        this.menuService.silenceClose();
    }
}

HTML 端:

样本:https://stackblitz.com/edit/angular-2faa8z