角材2 sidenav錯誤：.open不是函數

Question

plunker中的代碼工作正常，但它在我的電腦上無法正常工作。當我點擊打開側導航鍵，我看到錯誤消息「開不是一個函數」 screenshot of the error

//app.component.html 
<mat-sidenav-container class="example-container"> 
    <mat-sidenav #sidenav class="example-sidenav"> 
     Jolly good! 
    </mat-sidenav> 

    <div class="example-sidenav-content"> 
     <button type="button" mat-button (click)="sidenav.open()"> 
     Open sidenav 
     </button> 
    </div> 

    </mat-sidenav-container> 
//app.component.ts 
import { Component, ViewEncapsulation } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class AppComponent { 
    title = 'app'; 
} 

//app.component.css 
.example-container { 
    width: 500px; 
    height: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
    } 

    .example-sidenav-content { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
    } 

    .example-sidenav { 
    padding: 20px; 
    } 

Answer 1

您需要在您的@NgModule進口部分添加MatSidenavModule。

我重現了你的錯誤。看到這個鏈接：https://plnkr.co/edit/HalfBwhQ0atvlhmCN3An?p=preview 在這裏沒有MatSidenavModule在@NgModule。

請參考：https://material.angular.io/components/sidenav/api