如何使用sidenav的EventEmitter(onClose) [英] How to use EventEmitter(onClose) of the sidenav

问题描述

我想看看我的

<md-sidenav>

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

is getting closed. Is there a way to use the EventEmitter onClose of my sidenav object to check that? and can you give me an example?

推荐答案

这可以通过 2 种不同的方式实现 - 通过模板，以及在组件代码本身内.

This is possible in 2 different ways - via the template, and within the component code itself.

假设一个 HTML 模板如下:

Assuming an HTML template such as the following:

<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>

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

In your component you can have something like this:

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()(在组件代码中定义)，并将一些文本打印到控制台.您可以在 Event 中找到有关此技术的更多信息angular 文档的绑定部分.

Technique 1 is to use an event binding. This is the (close)="onClose()" section of the template. Whenever the close event is fired by the sidenav, the code specified in the quotes (i.e. onClose()) is run. In this scenario, the method onClose() (which is defined in the component code) is called, and prints some text to the console. You can find out more about this technique in the Event Bindings section of the angular documentation.

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

Technique 2 is to subscribe to the event in the component code itself. In this technique we export the sidenav as the variable mySidenav. This is the #mySidenav section of the template. In the component code we can get a reference to the sidenav by using the @ViewChild('mySidenav') annotation. When our component is initialised, we can gain access to the sidenav and hence run some code whenever the close event is fired. In this scenario, we use the subscribe() method of the Observable interface. It's important to unsubscribe from the subscription when the compoenent is destroyed to prevent memory leaks, hence the unsubscribe() call in ngOnDestroy(). You can find out more about observables in the Observables section of the rxjs documentation.

这篇关于如何使用sidenav的EventEmitter(onClose)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！