Угловой материал: откройте mat-sidenav из mat-dialog или @component

Я давно искал решение для этого, поэтому любая помощь будет отличной.

Я использую Angular Material 2 и хочу использовать метод .open() для mat-sidenav, нажав кнопку в mat-dialog или сразу после закрытия диалогового окна.

Согласно документации, я думаю, что могу пометить элемент mat-sidenav с помощью #sidenav (или чего-то еще), а затем поместить (click)="sidenav.open()" в элемент кнопки. Однако это не работает (я читал, что это может иметь какое-то отношение к другим z-плоскостям?).

Это выглядит примерно так:

sidenav.html

<mat-sidenav-container>
  <mat-sidenav #sidenav opened="false"> ... </mat-sidenav>
</mat-sidenav-container>

<button mat-button (click)="openDialog"></button>

dialog.html

<button mat-button (click)="sidenav.open()">Open Sidenav</button>

Диалоговое окно открывается и закрывается нормально, как и боковая навигация (с помощью другой кнопки).

Я уверен, что есть способ открыть боковую навигацию из @component, но я не понял, как это сделать, попробовав несколько методов.

Спасибо

Изменить: я должен был сказать, что я новичок в Angular 2+, поэтому, если бы вы могли включить фрагмент кода с ответом, я был бы признателен.


angular angular-material2 sidenav
person Richard    schedule 30.11.2017    source источник
comment
Просто создайте ссылку на элемент на #sidenav и вызовите ее оттуда. API включает методы open () и close ().   -  person Roddy of the Frozen Peas    schedule 30.11.2017
comment
Вы должны передать sidenav ссылку на переменную компоненту диалога в его привязке, только тогда вы сможете переключать боковую навигацию из модального окна.   -  person Pankaj Parkar    schedule 30.11.2017
comment
@RoddyoftheFrozenPeas Как мне сделать что-то из этого? Я новичок в Angular 2+   -  person Richard    schedule 01.12.2017
comment
@PankajParker Как мне сделать что-то из этого? Я новичок в Angular 2+   -  person Richard    schedule 01.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

На случай, если вы все еще не нашли ответа. Вот что, я думаю, может сработать.

Как упомянул @PankajParkar, вы можете передать переменную sidenav в диалоговое окно, когда открываете диалоговое окно.

let dialogRef = this.dialog.open(MyDialogComponent, {
    data: {
        sidenav: this.sidenav
    }
})

Затем из диалогового окна вы можете вызвать this.data.sidenav.open(). Поскольку я не пробовал это сделать, я не уверен, где в конечном итоге окажется боковой навигатор. Его можно было бы отобразить под диалоговым окном, но если диалоговое окно закроется сразу же, я думаю, это не будет проблемой.

person ahmadhsalim    schedule 04.02.2018