Angular2 材料设计中的可重用 Sidenav

Question

我已经开始学习 Angular2 和 Material design。我想创建一个具有以下组件的应用程序。参考下图

1. 汉堡菜单按钮。点击它会显示侧面板
2. 侧面板。它将有其他几个选项。此菜单在所有应用屏幕上通用

我创建了 3 个在图像中可见的组件。 right-menu-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 文档中的示例而不更改任何代码行。

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

当我点击“open sidenav”按钮时，控制台出现以下错误

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

编辑 3： 以下是模块的版本

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>