[英]Angular 4 / Angular Material 2 - Sidenav is not defined. The component declaration does not contain such a member
I have created a new project using Angular 4 and Material design 2. 我已经使用Angular 4和Material design 2创建了一个新项目。
I have added a sidenav and a toolbar. 我添加了sidenav和工具栏。
It all worked well when all the html was on app.comentent.html but I then created a new component to add the toolbar code and I started getting the error: 当所有html都位于app.comentent.html上时,一切都很好,但是随后我创建了一个新组件来添加工具栏代码,然后开始出现错误:
Here is the code: 这是代码:
app-topnav component: app-topnav组件:
<md-toolbar color="primary">
<button md-icon-button (click)="sidenav.toggle()">
<md-icon class="md-24 material-icons">menu</md-icon>
</button>
<span class="topbar-spacer"></span>
<button md-icon-button class="topbar-button-right">
<md-icon class="md-24 material-icons">notifications</md-icon>
</button>
<button md-icon-button class="topbar-button-right">
<md-icon class="md-24 material-icons">more_vert</md-icon>
</button>
</md-toolbar>
app.component: app.component:
<md-sidenav-container>
<md-sidenav #sidenav mode="side" class="app-sidenav">
<md-nav-list>
<div class="app-user-photo">
<img class="round user" src="../assets/image.jpg" alt="">
</div>
<md-list>
<md-list-item><i class="material-icons">Home</i><span>Home</span></md-list-item>
</md-list>
</md-nav-list>
</md-sidenav>
<app-topnav></app-topnav>
<div class="app-content">
Content area<br><br><br><br><br><br><br>
</div>
</md-sidenav-container>**
How can I fix this so that the sidenav toogle works again? 我该如何解决这个问题,以便sidenav toogle再次起作用?
I have the same issue as yours at one point. 在某一点上,我和您有同样的问题。 I solved this by not separating
md-toolbar
to md-sidenav-container
. 我通过不将
md-toolbar
分隔到md-sidenav-container
解决了这一问题。 A lot of snippets in github doesnt separate sidenav and toolbar often the two are in the same view. github中的许多代码片段没有将sidenav和工具栏分开,通常两者在同一视图中。 I prefer not to separate the two.
我不想将两者分开。
<md-sidenav-container>
<md-sidenav #sidenav mode="side" class="app-sidenav">
<md-nav-list>
<div class="app-user-photo">
<img class="round user" src="../assets/image.jpg" alt="">
</div>
<md-list>
<md-list-item><i class="material-icons">Home</i><span>Home</span></md-list-item>
</md-list>
</md-nav-list>
</md-sidenav>
<md-toolbar color="primary">
<button md-icon-button (click)="sidenav.toggle()">
<md-icon class="md-24 material-icons">menu</md-icon>
</button>
<span class="topbar-spacer"></span>
<button md-icon-button class="topbar-button-right">
<md-icon class="md-24 material-icons">notifications</md-icon>
</button>
<button md-icon-button class="topbar-button-right">
<md-icon class="md-24 material-icons">more_vert</md-icon>
</button>
</md-toolbar>
<div class="app-content">
Content area<br><br><br><br><br><br><br>
</div>
</md-sidenav-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.