角度4 /角度材料2 - 側面角度未定義。組件聲明不包含此類成員

Question

我已經使用Angular 4和Material設計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 toogle再次工作？

Answer 1

我有一個問題與你一樣。我通過不分開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>