javascript - Angular2 Material Design メニューが表示されますが、間違った場所にあり、機能しません

Question

私のアプリは Angular 2.0.1 と Angular Material 2.0.0-alpha.8-2 を使用しています。md-menu ドキュメントに従って、md-toolbar ヘッダーのボタンにメニュー ドロップダウンを追加しました。このヘッダー、ルーター アウトレット リンク、およびフッターは、AppComponent の 3 つの要素です。問題 #1: ボタンをクリックすると、テスト メニューが表示されますが、ボタンからのドロップダウンではなく、フッターの下にあります。x と y の位置を試しましたが、結果はありませんでした。ドロップダウンには、ページにルーティングするためのアンカー リンクが含まれています。問題 #2: アンカー リンクをクリックすると、ドロップダウンは消えますが、新しいページへのルーティングは発生しません。これらのアンカー リンクは、テスト目的でツールバーにもあります。リンクとルーターは、メニューの外側のツールバーで正しく機能します。関連するコードは次のとおりです。

<md-toolbar class="headerFooter"> <!--header toolbar element -->
  <span>
    <button md-button [md-menu-trigger-for]="menu">POST</button>
      <md-menu x-position="after" #menu="mdMenu">
        <a routerLink="/home" md-menu-item>Home</a><!--these links do not route-->
        <a routerLink="/rentApartment" md-menu-item>Rent an apartment</a>
        <button md-menu-item>RefreshTest</button>                           
     </md-menu>
  </span>

  <span><!-- to test routing - these links route properly-->
    <div>
      <a routerLink="/home">Home</a>
      <a routerLink="/rentApartment">Rent apartment</a>
    </div>
  </span>
  others, etc.
</md-toolbar> <!--end of header toolbar component -->

<div class="partialPage">
  <router-outlet></router-outlet>
</div>

<md-grid-list cols="6" rowHeight="100px" class="headerFooter"> <!--footer grid-list element -->
  <md-grid-tile><button md-button>TERMS</button></md-grid-tile>
  <md-grid-tile><button md-button>PRIVACY</button></md-grid-tile>
  others, etc.
</md-grid-list>

何を変更する必要がありますか?