Открыть / закрыть MatSidenav из другого компонента. Не определено в Angular 9 - PullRequest
Новая
       46

Открыть / закрыть MatSidenav из другого компонента. Не определено в Angular 9

0 голосов
/ 23 марта 2020

Я смотрю этот пост об открытии / закрытии sidenav из другого компонента:

Открытие / закрытие sidenav из другого компонента

Но в последней версии Angular 9 я получаю неопределенный элемент от MatSidenav. Вы можете увидеть мой код здесь.

https://stackblitz.com/edit/angular-pgw4eg

sidenav.service.ts 

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { RightSidenavComponent } from '../right-sidenav/right-sidenav.component';

@Injectable()
export class SidenavService {
    private sidenav: MatSidenav;

    public setSidenav(sidenav: MatSidenav) {
        this.sidenav = sidenav;
    }

    public open() {
        return this.sidenav.open();
    }


    public close() {
        return this.sidenav.close();
    }

    public toggle(): void {
        this.sidenav.toggle();
    }
}

sidenav.component.ts 

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

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})

export class SidenavComponent {

  @ViewChild('sidenav') public sidenav: MatSidenav;

    constructor(private sidenavService: SidenavService) {   }

    ngOnInit(): void {
        this.sidenavService.setSidenav(this.sidenav);
    }

}

Другие элементы аналогичны исходному решению, я изменил заголовки с MatSidenav на: 

import { MatSidenav } from '@angular/material/sidenav';

Спасибо за вашу помощь:)

РЕДАКТИРОВАТЬ С РЕШЕНИЕМ

Я получил решение. Вы можете посмотреть код здесь https://stackblitz.com/edit/angular-kwfinn-matsidenav-angular9

Необходимо изменить @ViewChild вроде: 

@ViewChild('rightSidenav', {static: true}) sidenav: MatSidenav;
...