javascript - Angular 2 材质：来自组件的 sidenav 切换

Question

我以这种方式在我的项目中使用 Angular 2 Material sidenav：

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      <md-nav-list>
      </md-nav-list>
  </md-sidenav>

  <button md-button (click)="start.toggle()">Close</button>

  <router-outlet></router-outlet>

</md-sidenav-layout>

如何start.toggle()从我的组件而不是带有点击事件的元素调用？

感谢您阅读

Answer 1

您想ViewChild在控制器中声明一个引用MdSidenav组件内部的 a，如下所示：

// Sidemenu
@ViewChild('start') sidenav: MdSidenav;

start您要引用的组件的名称在哪里，在本例中为 sidenav。

接下来，您可以在该 sidenav 上调用方法，就像this.sidenav.toggle()在控制器的函数中一样。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

Answer 2

将对象传递给您的函数。

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      <md-nav-list>
      </md-nav-list>
  </md-sidenav>

  <button md-button (click)="randomName(start)">Close</button>

  <router-outlet></router-outlet>

</md-sidenav-layout>

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor() {
    }

    randomName(start: any) {
        start.toggle();
    }
}

Answer 3

最简单的方法是将抽屉传递给触发切换的组件。

html:

<mat-drawer #drawer mode="side">
    ....
</mat-drawer>

<another-component [drawerRef]="drawer"><another-component/>

另一个组件 TS：

export class AnotherComponent implements OnInit {
   @Input() drawerRef: MatDrawer;
   ...
}

另一个组件的 HTML：

<button (click)="this.drawerRef.toggle()">

another-component 是控制切换动作的组件。

Answer 4

 <md-sidenav #sidenav class="example-sidenav" opened="false">
    <div class="example-sidenav-content">
      <button type="button" md-button (click)="toogleNav(sidenav)">
        toogle
      </button>
    </div>
 </md-sidenav>

在你的 ts 中：

export class AppComponent {

  toogleNav(nav: any) {
    if (nav.opened) {
      nav.close()
    } else {
      nav.open();
    }
  }
}