Angular2材料设计中的可重用Sidenav

我已经开始学习角度和材料设计。我想创建一个包含以下组件的应用程序。请参见下图以供参考

汉堡菜单按钮。轻敲它将露出侧面板

侧板。它将有几个其他的选择。此菜单在所有应用程序屏幕中都很常见

我已经创建了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>

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

---

创建一个服务来处理sidenav和工具栏之间的连接

sidenav.service.ts

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

  constructor() {
  }
}

export class ToolbarComponent implements OnInit {

  constructor(public sidenavService: SidenavService) { }
}

@ViewChild('sidenav') sidenav: MdSidenav;

constructor(private sidenavService: SidenavService) {

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

toolbar.component.ts

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

  constructor() {
  }
}

export class ToolbarComponent implements OnInit {

  constructor(public sidenavService: SidenavService) { }
}

@ViewChild('sidenav') sidenav: MdSidenav;

constructor(private sidenavService: SidenavService) {

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

toolbar.component.html

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

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

sidenav.component.html

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

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

。。。

显而易见的解决方案是将按钮和侧边栏放在根页面上，并使用它来更改所有内容else@elasticrash：请阅读编辑。此外，您可以共享一些从不同页面调用/显示右菜单（sidenav）的代码吗？实现这一点还有其他稍微复杂的方法，例如通过路由保护将组件动态注入视图中。这与我用你描述的方法尝试的方法非常相似。单击按钮会在sidenav.component.ts中出现错误“sidenav.toggle不是一个函数”。log（sidenav）打印“ElementRef{nativeElement:md sidenav.app sidenav}”，我再次测试了它，但对我来说它工作正常。你能告诉我更多关于你的问题吗？或者您使用的是哪个版本的材料我已经在Edit 3中添加了版本如果您确定，您已经像我一样做了所有事情，请尝试更新您的软件包。我正在研究angular 4.1.3、cli 1.1.0和angular material beta-6，可能有些变化：-）将material更新为2.0，但在编译代码时出错很多。此外，文档（）中的示例在材料网站本身中似乎无法正常工作。