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()而不是使用click事件调用元素？

感谢您阅读

Answer 1

您想在控制器中声明引用组件内ViewChild的{{1}}，如下所示：

MdSidenav

其中// Sidemenu @ViewChild('start') sidenav: MdSidenav;是您要引用的组件的名称，在本例中是sidenav。

接下来，您可以调用sidenav上的方法，例如控制器功能中的start。

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

Answer 2

将对象传递给您的函数。

clone

<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>

Answer 3

 <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();
    }
  }
}

Answer 4

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

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()">

其中另一个组件是控制切换操作的组件。

角度2材质：侧面切换来自组件

4 个答案: