Angular Material2 SideNav при открытии при закрытии

Я делаю веб-приложение, используя Angular 4 и материал. Я использую компонент материала "Сиденав". Я хотел бы вызвать событие, если sidenav открыт или закрыт. При добавлении функции к свойству щелчка кнопки событие запускается. Но если я закрою sidenav, нажав escape или щелкнув где-нибудь за пределами навигации, событие click на кнопке логически не сработает.

Для sidenav есть два свойства, называемые onOpen и onClose, но я не понимаю, как их использовать. Или они даже являются правильными свойствами для достижения того, что я хочу сделать?

Вот плункер для лучшего понимания: http://embed.plnkr.co/ZPmhbFm1hbOUKYp1rV6J/

В результате должно получиться оповещение с надписью «Мир», если сиденав закрывается, не нажимая кнопку.


angular angular-material angular-material2
person Leonzen    schedule 04.08.2017    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я видел вашу демонстрацию plunker. Вы не можете использовать onOpen и onClose таким образом. Измените свой md-sidenav html на следующий:

<md-sidenav class="example-sidenav" #sidenav mode="over" opened="false" 
            (open)="menufunction('SideNav Opened')"  
            (close)="menufunction('SideNav Closed')">

Вот ссылка на обновленный планк: https://plnkr.co/edit/96Hz4rZFJCuyNZDwEpGd?p=preview

person Faisal    schedule 04.08.2017
comment
Для лучшего понимания: это означает, что я могу вызвать метод любого компонента, поместив их в скобки. Или где в документации написано, что у этого компонента есть (открыть) и (закрыть)? - person Leonzen; 04.08.2017
comment
если вы видите документацию, вы будете оштрафованы @Output('open') onOpen, параметр «открыть» указывает на событие. Если вы хотите сделать то же самое в component.ts, вам нужно подписаться на событие onOpen следующим образом: this.sidenav.onOpen.subscribe(() => this.menufunction('Hello')); Лично я предпочитаю подход, указанный в ответе, поскольку он прост и не требует получения @ViewChild('sidenav'). Вот ссылка на документацию: material.angular.io/components/sidenav/api - person Faisal; 04.08.2017
comment
Еще один вопрос (извините, я новичок в angular), так что есть свойство @Output ('open-start') onOpenStart. Это означает, что я могу подписаться на него вот так this.sidenav.onOpenStart.subscribe(() => this.menufunction('Hello'));. Но могу ли я также написать (open-start)=menufunction('Hello');? - person Leonzen; 04.08.2017
comment
извините, я не пробовал с (open-start)="menufunction('Hello');", поэтому не могу комментировать, как это работает. - person Faisal; 04.08.2017

arrow_upward
2
arrow_downward

onOpen и onClose — это @Output() события, которые генерирует ваш сиденав.

Чтобы использовать их, вы должны «сохранить» свой sidenav в атрибуте компонента:

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

и подписаться на событие, чтобы делать то, что вы хотите делать, когда эти события испускаются (я бы посоветовал поместить этот код в ngOnInit()):

this.sidenav.onOpen.subscribe(() => this.menufunction('Hello'));
person FatL    schedule 04.08.2017

arrow_upward
1
arrow_downward

Существует встроенное событие openedChanged, которое возвращает логическое значение.

(openedChanged)=function($event)
person Amir Esmaeili    schedule 10.07.2020