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()（在组件代码中定义），并将一些文本输出到控制台。您可以在Event Bindings section of the angular documentation.

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

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

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>

将组件类中的方法处理为

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

  }

LIVE DEMO

如何使用sidenav的EventEmitter（onClose）

2 个答案: