Angular2中的可重用Sidenav材质设计

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

汉堡菜单按钮。点击它将显示侧面板
侧面板。它会有其他几个选项。此菜单是通用于所有应用程序的屏幕

我已经创建了3个组成部分的图像中可见。右键菜单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>

当我点击 “打开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

来源

2017-05-31 Sahil

显而易见的解决办法是把根页面上的按钮和侧栏和使用<路由器出口>改变一切 – elasticrash

@elasticrash：请阅读编辑。另外，你可以分享一些调用/显示右侧菜单（sidenav）的代码 – Sahil

还有其他一些更复杂的方法来达到这个目的，比如动态地将一个组件注入到一个视图中......例如通过一个路径守卫。这是非常相似的这种方法https://stackoverflow.com/questions/41602522/dynamically-load-different-css-files-in-angular2-application-based-on-users-lan/44111038#44111038 – elasticrash

创建一个处理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>

来源

2017-05-31 12:05:47

我试过了你描述的方式。单击该按钮会在sidenav.component.ts中发出错误“sidenav.toggle不是函数”。 console.log（sidenav）打印“ElementRef {nativeElement：md-sidenav.app-sidenav}” – Sahil

我再次测试过它，但对我来说它工作正常。你能告诉我更多关于你的问题吗？或者您正在使用哪种版本的材料 –

我在编辑3中添加了版本 – Sahil

Angular2中的可重用Sidenav材质设计

回答

相关问题