如何使用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?

推荐答案

这可以通过两种不同方式实现-通过模板和组件代码本身.

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()(在组件代码中定义)被调用，并将一些文本输出到控制台.您可以在事件中找到有关此技术的更多信息.角度文档的装订"部分.

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.

技术2是在组件代码本身中订阅事件.在这种技术中，我们将sidenav导出为变量mySidenav.这是模板的#mySidenav部分.在组件代码中，我们可以使用@ViewChild('mySidenav')批注获取对sidenav的引用.初始化组件后，我们就可以访问sidenav并因此在触发close事件时运行一些代码.在这种情况下，我们使用Observable接口的subscribe()方法.当组件被破坏时，取消订阅是很重要的，以防止内存泄漏，因此ngOnDestroy()中的unsubscribe()调用.您可以在中找到有关可观察物的更多信息. 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屋！