如何使用sidenav的EventEmitter(onClose)

Question

我想查看我的

<md-sidenav>

即将关闭。有没有办法使用我的 sidenav 对象的 EventEmitter onClose 来检查？你能举个例子吗？

Answer 1

这可以通过两种不同的方式实现——通过模板，以及在组件代码本身中。

假设 HTML 模板如下：

<md-sidenav-container>
  <md-sidenav #mySidenav (close)="onClose()" mode="side">
    This is sidenav content
  </md-sidenav>
  <button md-raised-button (click)="mySidenav.toggle()">Toggle Sidenav</button>
</md-sidenav-container>

在你的组件中你可以有这样的东西：

import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  @ViewChild('mySidenav')
  sidenav: MdSidenav;

  subscription: Subscription;

  ngAfterViewInit(): void {
    this.subscription = this.sidenav.onClose.subscribe(() =>
      console.log("Closed event from observable"));
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  onClose(): void {
    console.log("Closed event from template");
  }

}

技巧一是使用事件绑定。这是模板的 (close)="onClose()" 部分。每当 sidenav 触发关闭事件时，引号中指定的代码（即 onClose()）为运行。在这种情况下，方法 onClose()（在组件代码中定义）被调用，并向控制台打印一些文本。您可以在 Event Bindings section of the angular documentation.

中找到有关此技术的更多信息

技巧二是在组件代码本身订阅事件。在此技术中，我们将 sidenav 导出为变量 mySidenav。这是模板的 #mySidenav 部分。在组件代码中，我们可以使用 @ViewChild('mySidenav') 注释获取对 sidenav 的引用。当我们的组件被初始化时，我们可以获得对 sidenav 的访问权限，因此每当关闭事件被触发时运行一些代码。在这个场景中，我们使用Observable接口的subscribe()方法。当组件被销毁以防止内存泄漏时取消订阅很重要，因此 unsubscribe() 在 ngOnDestroy() 中调用。您可以在 Observables section of the rxjs documentation.

中找到更多关于 observables 的信息

Answer 2

其实很简单如下

HTML

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav" (close)="onClose()" >
    Jolly good!
  </md-sidenav>

  <div class="example-sidenav-content">
    <button md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

将组件Class中的方法处理为

onClose(){
    window.alert('closed the side nav bar');

  }

LIVE DEMO

如何使用sidenav的EventEmitter(onClose)

How to use EventEmitter(onClose) of the sidenav

angular

angular-material2