1

私はAngular 2マテリアルを使用しており、app.component.htmlにsidenavレイアウトが必要です

<md-sidenav-layout>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</md-sidenav-layout>

外部委託コンポーネント navbar.component.html のツールバーであるサイド ナビゲーション

<div class="navbar">
  <md-sidenav #sidenav mode="side" class="app-sidenav">
    <button md-button (click)="sidenav.toggle()">Overview </button>
    <button md-button>Deploy</button>
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    <!-- This fills the remaining space of the current row -->
    <span class="navbar-fill-middle-space"></span>

    <button md-button>Login</button>
  </md-toolbar>
</div>

現時点での私の問題は、親 html の sidnav レイアウトが子 html の sidenav によって認識されないことです。このように解決する可能性はありますか、それともトグルバーを使用してサイドナビを親htmlに移動する必要がありますか? アドバイスありがとう

4

1 に答える 1

1

私たちが行った方法 (angular2-material はまだアルファ版であるため、正しい方法ではない可能性があることに注意してください) は、app.component.html で次のように実行します。

<md-sidenav-layout>
  <md-toolbar color="primary"> ... </md-toolbar>
  <md-sidenav> ... </md-sidenav>
  <div class="sidenav-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

したがって、現在のルートに関連するものはすべて、sidenav レイアウトのコンテンツ領域に挿入されます。

<md-toolbar>また、要素の前にを配置していることにも注意してください<md-sidenav>。したがって、sidenav がアクティブな場合、マテリアル デザインのアプリから予想されるように、ツールバーにも移動します。

于 2016-12-05T13:40:26.510 に答える