web-dev-qa-db-ja.com

Angular 2 material：コンポーネントからのsidenavトグル

私はこのプロジェクトで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()を呼び出す方法は？

読んでくれてありがとう

javascriptangularangular2-templateangular-material2
16
Alex Lévy

次のように、コンポーネント内でViewChildを参照するMdSidenavをコントローラーで宣言する必要があります。

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

ここで、startは参照するコンポーネントの名前、この場合はsidenavです。

次に、コントローラーの関数内でthis.sidenav.toggle()のように、そのサイドナブでメソッドを呼び出すことができます。

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

17
Alexander Ciesielski

オブジェクトを関数に渡します。

<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();
    }
}
10
Ugnius Malūkas
 <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();
    }
  }
}
0
JpCrow