Как включить мат-сиденав в другом компоненте?

Question

Я хочу переключать боковую навигацию (в компоненте ящика), щелкая значок меню (в компоненте заголовка).Я пытался использовать сервис;но состояние службы не разделялось между этими двумя компонентами.

Демонстрация здесь https://stackblitz.com/edit/angular-11pdkj

Answer 1

Вы должны использовать декораторы @Input и @Output и EventEmitter для отправки события от одного компонента к другому. Я исправил твой код, Пожалуйста, проверьте это: stackblitz

Answer 2

Я решил эту проблему, не устанавливая sidenav в сервисе, а превратив сервис в уведомитель, когда sidenav должен переключаться.Поэтому, когда вы нажимаете кнопку, сервис сообщает субъекту поведения, что он выбрасывает его, заменяя его на DrawerComponent.Этот компонент подписывается на тему поведения в ngOnInit.И переключает sidenav, когда служба уведомляет компонент о переключении.

Следующий StackBlitz показывает, как я исправил ваш код: https://stackblitz.com/edit/angular-mgm4xn

Answer 3

Angular обеспечивает очень мощную концепцию Input, Output.Пожалуйста, рассмотрите возможность использования Input, Output and EventEmitter с этим всем, что вы можете перенаправить событие от одного компонента к другому компоненту.

Пожалуйста, посмотрите на эту демонстрационную ссылку .

// drawer.component.ts
export class DrawerComponent implements AfterViewInit, OnChanges {
  @ViewChild('sidenav') public sidenav: MatSidenav;

  @Input()
  openNav: boolean;

  ngOnChanges(): void {
    console.log('ngOnChanges', this.openNav);
    if (this.openNav) {
      this.sidenav.open();
    } else {
      this.sidenav.close();
    }
  }
}

// header.component.ts
export class HeaderComponent implements OnInit {
  title: string = "Dashboard";

  @Output()
  open: EventEmitter<boolean> = new EventEmitter();

  clickMenu() {
    this.open.emit(true);
  }
}

// layouts.component.html
<div class="app-wrapper">
  <app-drawer [openNav]="isOpen"></app-drawer>
  <app-header (open)="navOpen($event)"></app-header>
<div>

// layouts.component.ts
export class LayoutsComponent implements OnInit {

  isOpen: boolean;
  navOpen($event): void {
    this.isOpen = !this.isOpen;
    console.log('navOpen', $event);
  }
}

также при необходимости используйте соответствующие крючки жизненного цикла компонента.