如何使用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");
  }

}

技术1是使用事件绑定。这是(close)="onClose()"模板的部分。只要sidenav触发close事件，onClose()就会运行引号（即）中指定的代码。在这种情况下，该方法onClose()（在组件代码中定义）被调用，并将一些文本输出到控制台。您可以在角度文档的“ 事件绑定”部分中找到有关此技术的更多信息。

技术2是在组件代码本身中订阅事件。在这种技术中，我们将sidenav导出为变量mySidenav。这是#mySidenav模板的部分。在组件代码中，我们可以使用@ViewChild('mySidenav')注释获得对sidenav的引用。当我们的组件初始化时，我们可以访问sidenav并因此在触发close事件时运行一些代码。在这种情况下，我们使用接口的subscribe()方法Observable。当组件被销毁时，取消订阅是很重要的，以防止内存泄漏，因此请unsubscribe()调用ngOnDestroy()。您可以在rxjs文档的Observables部分中找到有关Observable的更多信息。