Angular2材料设计中可重复使用的Sidenav

Question

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

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>

当我点击＆＃34;打开sidenav＆＃34;按钮，它在控制台中给出以下错误

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>