Angular Material2 SideNav onOpen on Close

Question

我正在使用 Angular 4 和 material 制作网络应用程序。我正在使用 material "Sidenav" 组件。如果 sidenav 打开或关闭，我想触发一个事件。通过向按钮的单击属性添加一个函数来触发事件。但是，如果我通过按 Esc 或单击导航之外的某处来关闭 sidenav，则按钮上的单击事件在逻辑上不起作用。

sidenav 有两个属性，名为 onOpen 和 onClose，但我不明白如何使用它们。或者它们是否是实现我想要做的事情的正确属性？

为了更好地理解这里有一个plunker：http://embed.plnkr.co/ZPmhbFm1hbOUKYp1rV6J/

如果 sidenav 因未按下按钮而关闭，结果应该是带有 "World" 的警报。

Answer 1

onOpen 和 onClose 是您的 sidenav 发出的 @Output() 事件。

为了使用它们，您必须 "store" 在组件的属性中设置您的 sidenav :

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

并订阅事件以在发出这些事件时执行您想执行的操作（我建议将此代码放在 ngOnInit() 中）：

this.sidenav.onOpen.subscribe(() => this.menufunction('Hello'));

Answer 2

我看过你的plunker demo。您不能那样使用 onOpen 和 onClose。将您的 md-sidenav html 更改为以下内容：

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

这里是 link 更新的 plunk：https://plnkr.co/edit/96Hz4rZFJCuyNZDwEpGd?p=preview

Answer 3

有一个内置事件 openedChanged，它 returns 一个布尔值。

(openedChanged)=function($event)

Angular Material2 SideNav onOpen on Close

Angular Material2 SideNav onOpen on Close

angular-material

angular-material2

angular