Angular 2材质:来自组件的侧导航切换

Angular 2 material : sidenav toggle from component

本文关键字：导航 组件 材质 Angular      更新时间：2023-09-26

我在我的项目中使用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()，而不是用点击事件调用元素？

感谢您阅读

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

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

其中start是要引用的组件的名称，在本例中为sidenav。

接下来，您可以在sidenav上调用方法，比如控制器函数中的this.sidenav.toggle()。

https://angular.io/docs/ts/latest/cookbook/component-communication.html##查看子的父级

将对象传递给函数。

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

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

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

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

 <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();
    }
  }
}
相关文章：