Angular 4 / Angular Material 2 - Sidenav 未定义。组件声明不包含这样的成员答案

【问题标题】：Angular 4 / Angular Material 2 - Sidenav is not defined. The component declaration does not contain such a memberAngular 4 / Angular Material 2 - Sidenav 未定义。组件声明不包含这样的成员
【发布时间】：2018-02-18 12:42:12
【问题描述】：

我使用 Angular 4 和 Material design 2 创建了一个新项目。

我添加了一个sidenav 和一个工具栏。

当所有 html 都在 app.comentent.html 上时一切正常，但是我创建了一个新组件来添加工具栏代码，然后我开始收到错误：

代码如下：

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：

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

我该如何解决这个问题，以便 sidenav 工具再次工作？

【问题讨论】：

标签： javascript angular flexbox angular-material

【解决方案1】：

我曾经遇到过和你一样的问题。我通过不将md-toolbar 与md-sidenav-container 分开来解决了这个问题。 github中的很多sn-ps并没有将sidenav和toolbar分开，通常两者在同一个视图中。我不想将两者分开。

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

【讨论】：