再利用可能なSidenav in Angular2素材デザイン

Question

私はAngular2と素材デザインを学び始めました。私は以下のコンポーネントを持つアプリケーションを作成したいと思います。参照のための下のイメージを参照してください

1. ハンバーガーメニューボタン。それをタップするとサイドパネルが表示されます
2. サイドパネル。他にもいくつかのオプションがあります。このメニューは、すべてのアプリ画面

Iは、画像中の目に見えるように3つのコンポーネントを作成しているで共通です。右メニュー-component.htmlは私がボタンをタップでこのメニューを明らかにしない方法を知りたい

<md-sidenav #sidenav mode="side" class="app-sidenav"> 
    <ul> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    </ul> 
</md-sidenav> 

以下のように見える、それはホーム画面からのものまたは約画面

例でdocsは編集1つのページではなく、再利用可能なメニューコンポーネントとして

を実装を示しています。 私は登録などはしません、などのログインなど、一部の画面のようにルート・ページ上のボタンを配置したくありませんメニューがあります。しかし、それらをルートページに配置する方が良いアプローチであり、ボタンを表示/隠すことができる場合は、追加します。

編集2： コードの行を変更せずにAngularドキュメントの例を使用してみました。私は "オープンsidenav" ボタンをクリックしてください

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

は、それが編集3

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:34:4 caused by: self._el_42.open is not a function 

コンソールに以下のエラーを与える：以下 があるモジュールのバージョン

angular-cli: 1.0.0-beta.28.3 
node: 6.9.5 
os: darwin x64 
@angular/animations: 4.1.3 
@angular/common: 2.4.10 
@angular/compiler: 2.4.10 
@angular/core: 2.4.10 
@angular/forms: 2.4.10 
@angular/http: 2.4.10 
@angular/material: 2.0.0-beta.3 
@angular/platform-browser: 2.4.10 
@angular/platform-browser-dynamic: 2.4.10 
@angular/router: 3.4.10 
@angular/compiler-cli: 2.4.10 

Answer 1

sidenavとツールバーとの間の接続を処理するサービスを作成します。

sidenav.service.ts

@Injectable() 
export class SidenavService { 
    toggle = new EventEmitter(); 

    constructor() { 
    } 
} 

toolbar.component.ts

export class ToolbarComponent implements OnInit { 

    constructor(public sidenavService: SidenavService) { } 
} 

toolbar.component.html

<md-toolbar color="primary" fxLayout="row" color="none"> 
    <button ... (click)="sidenavService.toggle.emit()"> ... </button> 
</md-toolbar> 

sidenav.component.ts

@ViewChild('sidenav') sidenav: MdSidenav; 

constructor(private sidenavService: SidenavService) { 

    this.sidenavService.toggle 
     .asObservable() 
     .subscribe(
     () => this.sidenav.toggle() 
     ); 
} 

sidenav.component。HTML

<md-sidenav #sidenav>...</md-sidenav>