Question

我的应用程序中有一个素材2 sidenav组件。如何从我的班级访问组件方法？就我而言，我想调用open()方法。在模板中使用<button md-button (click)="sidenav.open()">完全正常，但如果我通过this.el.nativeElement.open();在课堂上使用该方法，它会抛出：

错误类型错误：无法读取属性＆＃39;打开＆＃39;未定义的

我的组件：

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

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

ViewChild采用您要跟踪的组件的类类型。在你的情况下，我认为是sidenav。您应该按如下方式更改代码，以便能够访问您在模板中注入的第一个export class SidebarContentComponent implements OnInit { @ViewChild(MdSidenav) sidenav: MdSidenav; constructor() { } ngOnInit() { } openSideNav() { this.sidenav.open(); } }组件：

unittest.TestCase

Answer 2

像这样更改@ViewChild：

@ViewChild('sidenav', {read: ComponentRef}) c: ComponentRef;

然后你可以像这样访问实例方法。

c.instance.open()

编辑：

或者您可以将Type指定为您的组件类型，就像其他答案所说的那样......

从类中调用组件的方法

2 个答案: