首页 文章

角度4 /角度材料2 - Sidenav未定义 . 组件声明不包含此类成员

提问于
浏览
0

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

我添加了sidenav和工具栏 .

当所有html都在app.comentent.html上时,这一切都运行良好但我创建了一个新组件来添加工具栏代码,我开始收到错误:

这是代码:

app-topnav component:

<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 toogle再次运作?

1 回答

  • 2

    我和你的问题一样 . 我通过不将 md-toolbar 分离为 md-sidenav-container 解决了这个问题 . github中的很多片段并没有将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>
    

相关问题