Открытие мат-сиденав с кнопки снаружи мат-сиденав-контейнера - PullRequest
Новая
       11

Открытие мат-сиденав с кнопки снаружи мат-сиденав-контейнера

0 голосов
/ 27 февраля 2019

Я пытаюсь сделать то же самое для мобильного использования, что команды Angular Material сделали на в этом примере .

Итак, я создал свой компонент, например: 

<app-component-0></app-component-0>
<div class="d-lg-none">
    <button mat-icon-button (click)="snav.toggle()">
         <mat-icon>menu</mat-icon>
    </button>
    <mat-sidenav-container class="sidenav-container">
        <mat-sidenav #snav mode="over">
           <app-menu-tree>
           </app-menu-tree>
        </mat-sidenav>
        <mat-sidenav-content>
           <router-outlet></router-outlet>
        </mat-sidenav-content>
   </mat-sidenav-container>
</div>
<app-component-1-desktop class="d-none d-lg-flex flex-column"></app-component-1-desktop>

Таким образом, кнопка, вызывающая действие переключения sidenav, находится вне контейнера mat-sidenav-container, точно так же, как в примереon stackblitz ... Но у меня возникает следующая ошибка, когда я нажимаю кнопку:

Невозможно прочитать свойство 'toggle' из неопределенного

И поэтому кнопка может 't открыть sidenav ...

У кого-нибудь есть идея, чтобы это исправить?

(извините за мой английский, это не мой родной язык)

1 Ответ

0 голосов
/ 27 февраля 2019

Используйте вход opened.API: https://material.angular.io/components/sidenav/api

шаблон: 

<button mat-icon-button (click)="opened = !opened">
  <mat-icon>menu</mat-icon>
</button>
<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="over" [(opened)]="opened">
    <app-menu-tree></app-menu-tree>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

не забудьте определить свойство opened в своем компоненте.

...