从类中调用组件的方法

Question

我的应用程序中有一个物料2 sidenav组件。如何从类中访问组件方法？就我而言，我想调用该open()方法。在模板中可以<button md-button (click)="sidenav.open()">很好地工作，但是如果我在类via中使用方法this.el.nativeElement.open();，则会抛出：

错误TypeError：无法读取未定义的属性“打开”

我的组件：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-sidebar-content',
  template: `
    <md-sidenav-container class="example-container">

      <md-sidenav #sidenav class="example-sidenav">
        Jolly good!
      </md-sidenav>

      <div class="example-sidenav-content">
        <button md-button (click)="sidenav.open()">
          Open sidenav
        </button>
      </div>

    </md-sidenav-container>
  `,
  styleUrls: ['./sidebar-content.component.css']
})
export class SidebarContentComponent implements OnInit {

  @ViewChild('sidenav') el: ElementRef;

  constructor() { }

  ngOnInit() {

  }

  openSideNav() {
    // this.el.nativeElement.open();
    // ERROR TypeError: Cannot read property 'open' of undefined
  }

}

Answer 1

我认为你在滥用ViewChild。看看ViewChild的官方文档：https ://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

ViewChild采用您要跟踪的组件的类类型。MdSidenav我想在你的情况下。您应该按以下方式更改代码，以便能够访问sidenav在模板中注入的第一个组件：

export class SidebarContentComponent implements OnInit {

  @ViewChild(MdSidenav) sidenav: MdSidenav;

  constructor() { }

  ngOnInit() {

  }

  openSideNav() {
    this.sidenav.open();
  }

}