Question

我正在使用Angular 4和材料进行Web应用。我正在使用材料“Sidenav”组件。如果sidenav打开或关闭，我想触发一个事件。通过向按钮的click属性添加函数，可以触发事件。但是如果我通过按下escape或点击导航外的某个地方来关闭sidenav，按钮上的click事件在逻辑上就不起作用了。

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

这是一个更好理解的掠夺者：http://embed.plnkr.co/ZPmhbFm1hbOUKYp1rV6J/

如果没有按下按钮关闭sidenav，结果应该是带有“World”的警报。

Answer 1

我见过你的plunker演示。您不能像这样使用onOpen和onClose。将您的md-sidenav html更改为以下内容：

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

以下是更新的plunk的链接：https://plnkr.co/edit/96Hz4rZFJCuyNZDwEpGd?p=preview

Answer 2

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

要使用它们，您必须将sidenav“存储”在组件的属性中：

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

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

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

Answer 3

有一个内置事件 openedChanged ，该事件返回一个布尔值。

(openedChanged)=function($event)

Angular Material2 SideNav onOpen on Close

3 个答案: