angular - 如何使用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 是使用事件绑定(bind)。这是模板的 (close)="onClose()" 部分。每当 sidenav 触发关闭事件时，引号中指定的代码(即 onClose())就会运行。在这种情况下，调用方法 onClose()(在组件代码中定义)，并将一些文本打印到控制台。您可以在 Event Bindings section of the angular documentation. 中找到有关此技术的更多信息

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