html - Angular Material: Tetikleyici farklı bir bileşende olduğunda sidenav nasıl değiştirilir

Başka bir bileşenden yan menüyü nasıl açıp kapatabilirim?

Buton/tetikleyici, sidenav ile aynı .html dosyasında olduğunda sorunsuz çalışıyor, ama yeni bir bileşen oluşturursam, benim durumumda bunlara "sidebar-left" ve "topbar" adını verdim, çalışmıyor.

Yaptığım şey, onları ayırmak için bileşenler oluşturmaktı. Sidenav'i "sidebar-left" bileşenine koydum ve buton/tetikleyiciyi "topbar" bileşenine koydum.

sidebar-left.component.html

<mat-sidenav-container>

    <mat-sidenav #sidenav mode="side" [(opened)]="opened" opened>
        <h3>Sidenav</h3>
    </mat-sidenav>

    <mat-sidenav-content>
        <app-dashboard></app-dashboard>
    </mat-sidenav-content>

</mat-sidenav-container>

topbar.component.html

<mat-toolbar>
    <button (click)="sidenav.toggle()" mat-raised-button>Toggle Sidenav</button>
</mat-toolbar>

Uygulamanın içinde nerede tetiklersem tetikleyebileceğim bir şekilde yan menüyü tetikleyebilmek isterim.

Ve geçiş düğmesine bastığımda bu hatayı alıyorum:

TopbarComponent.html:1 ERROR TypeError: Cannot read property 'toggle' of undefined
    at Object.eval [as handleEvent] (TopbarComponent.html:2)
    at handleEvent (core.js:43993)
    at callWithDebugContext (core.js:45632)
    at Object.debugHandleEvent [as handleEvent] (core.js:45247)
    at dispatchEvent (core.js:29804)
    at core.js:42925
    at HTMLButtonElement.<anonymous> (platform-browser.js:2668)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

İşte çalışmayan StackBlitz kodum

Cevap #1

Bileşenler arasında iletişim kurmanın üç olası yolu vardır. Aldığınız hata, bileşeninizde sidevav özelliğinin olmamasından ve tanımsız bir üye üzerinde toggle fonksiyonunun bildirilmemiş olmasından kaynaklanmaktadır.

Bileşenler arasında iletişim kurmanın belirli yolları vardır.

Yerel olay odaklı iletişimi kullanın.

Ebeveynten çocuğa giriş (değer) aracılığıyla, çocuktan ebeveyne çıkış (olay) aracılığıyla.

  //this is how to create an event emitter
  @Output() toggle: EventEmitter<any> = new EventEmitter();

  constructor() { }

  emit() {
      this.toggle.emit(null);
  }

• TopbarComponent içinde yukarıdaki kodu ekliyorsunuz.

• Your AppComponent içinde toggle'a bağlanıyorsunuz

ve ts dosyasında toggle fonksiyonunu oluşturursun

toggle() {
     this.firstSelected = !this.firstSelected;
}

Sonra seçilen ilk değeri bileşenlerinize geçirirsiniz ve buna göre gizleyip gösterirsiniz.

Bu resmi yoldur. Bu çözümün stackblitz üzerinde çalıştığını buradan kontrol edin

Bir etkinlik servisi kullanın

Etkinlikleri tetikleyebileceğiniz bir etkinlik servisi oluşturabilir ve ana geçiş bunun abonesi olabilir ve uygulama genelinde geçiş yapabilir. Örneğin buradan kontrol edin

Durumları depolar aracılığıyla paylaşmak için bir kütüphane kullanın

Belgeleri burada kontrol edin