Angular：用另一個組件打開 sidenav，錯誤類型錯誤：無法讀取未定義的屬性“切換”

Question

我無法從另一個組件打開 sidenav 錯誤出現在此問題所附的圖像中。 事實上，我想在我的代碼中使用這種風格的 sidenav：

https://stackblitz.com/angular/lronayrmlye?file=src%2Fapp%2Fsidenav-autosize-example.ts

但我希望能夠從另一個組件打開 sidenav

包含按鈕的組件：navigation.component

包含 sidenav 的組件： layouts.component

sidebar.service.ts

import { Injectable, EventEmitter } from '@angular/core';
import { MatSidenav, MatDrawer } from '@angular/material/sidenav';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class SidenavService {
 public sideNavToggleSubject: BehaviorSubject<any> = new BehaviorSubject(null);

  constructor() { }   
  private drawer: MatDrawer;

  setDrawer(drawer: MatDrawer) {
      this.drawer = drawer;
  }

  toggle(): void {
      this.drawer.toggle();
  }
}

navigation.component.html 

 <mat-toolbar-row>
<button type="button"  class= "open-sidebar" mat-button (click)="toggled()">
        Toggle sidenav
      </button>

  </mat-toolbar-row>


navigation.component.ts

import { Component, OnInit , ChangeDetectorRef} from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { SidenavService } from '../services/sidenav.service';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent  {
  constructor(

    private sidenavService: SidenavService) { }

    toggled() {
      this.sidenavService.toggle();
  }

}


layouts.component.html



<div>


<div class="mat-typography">
  <app-navigation></app-navigation>
  <router-outlet></router-outlet>
</div>

<mat-drawer-container class="example-container colorred" autosize>

  <mat-drawer #drawer class="example-sidenav" position="end" mode="side">
    <p>Auto-resizing sidenav</p>
    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
    <button (click)="showFiller = !showFiller" mat-raised-button>
      Toggle extra text
    </button>
  </mat-drawer>

</mat-drawer-container>

</div>



layouts.component.ts




import { Component, VERSION as ngv , ViewChild} from '@angular/core';
import {MatSidenavModule,MatDrawer} from '@angular/material/sidenav';
import {SidenavService} from 'src/app/layouts/services/sidenav.service';
@Component({
  selector: 'app-layouts',
  templateUrl: './layouts.component.html',
  styleUrls: ['./layouts.component.scss']
})
export class LayoutsComponent {
  constructor(private sidenavService: SidenavService) {

  }

  @ViewChild('drawer') public drawer: MatDrawer;

  ngOnInit() {
      this.sidenavService.setDrawer(this.drawer);
  }
  showFiller = false;
}

Answer 1

除了您沒有在布局組件的 ViewChild 中將 static 設置為抽屜之外，您的代碼中的一切都是正確的。

@ViewChild('drawer', { static: true }) public drawer: MatDrawer;

Answer 2

在您的服務中，您應該像這樣更新您的@Injectable裝飾器：

@Injectable({
  providedIn: 'root'
})

您看到的錯誤基本上表明該服務在您的組件中未定義。 換句話說，它沒有被正確注入。 上面的代碼是在根 (AppModule) 提供服務的最簡單方法，因此可以將其注入到您的組件中。