Как переключить angular материал сиденав из другого компонента? - PullRequest
0 голосов
/ 22 апреля 2020

У меня есть два компонента Панель инструментов и Sidenav. Я хочу переключить ящик sidenav и отобразить его содержимое, вызвав его на панели инструментов. .Данный ниже компонент панели инструментов содержит кнопку для переключения sidenav

<button mat-button (click)="onToggleSidenav()"><mat-icon>widgets</mat-icon>{{ 'WIDGETS' | translate }}</button>

Также ниже приведены шаблон Sidenav, а сервисный код sidenav содержит выдвижную панель / вид боковой панели для отображения. Я создал сервис sidenav, который я нашел в какой-то статье, но мне не ясно, как использовать его для связывания родительского и дочернего компонентов, в данном случае это Toolbar (Parent) и Sidenav (child).

  <mat-drawer #drawer mode="side" position="end">
    <mat-drawer-content>
      <mat-list style="padding: 10px;">
        <mat-card *ngFor="let item of toolPaletteItems" 
        style="padding: 8px; margin-bottom: 10px; text-align: center;">
          <img mat-card-sm-image
              [src]="item.icon"
              [alt]="item.name"
              draggable="true"
              (dragstart)="onDragStart($event, item.id)">
          <mat-card-content>
            <mat-card-subtitle>
              {{item.name}}
            </mat-card-subtitle>
          </mat-card-content>
        </mat-card>
      </mat-list>
    </mat-drawer-content>
  </mat-drawer>
</mat-drawer-container> ```




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

@Injectable({
  providedIn: 'root'
})
export class SidenavService {

  private sidenav: MatSidenav;
  private opened = false;

  constructor() {}

  public setSidenav(sidenav: MatSidenav) {

    // if (!sidenav) {
    //   console.log('NavComponent: sidenav cannot be null');
    // }

    this.sidenav = sidenav;
  }

  public open() {
    this.opened = true;
    return this.sidenav.open();
  }

  public close() {
    this.opened = false;
    return this.sidenav.close();
  }

  public toggle() {
    this.opened = !this.opened;
    return this.sidenav.toggle();
  }

  // public isOpen(): boolean {
  //   return this.opened;
  // }

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...