Angular Material: Как переключать сиденав, когда триггер находится в другом компоненте - PullRequest
Новая
       23

Angular Material: Как переключать сиденав, когда триггер находится в другом компоненте

1 голос
/ 30 октября 2019

как мне переключить sidenav из другого компонента?

Когда кнопка / триггер находится в том же файле .html, что и sidenav, он работает просто отлично, но если я сгенерирую новый компонент, в моемВ случае, когда я назвал их «sidebar-left» и «topbar», это не работает.

Я создал компоненты для их разделения. Я поместил sidenav в компонент "sidebar-left", а кнопку / триггер в компонент "topbar".

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>

Я хотел бы иметь возможность вызывать sidenav независимо от того, где я запускаю его внутри приложения.

И когда яНажмите кнопку переключения, у меня появляется эта ошибка: 

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)

Вот мой неработающий код StackBlitz

1 Ответ

0 голосов
/ 30 октября 2019

Существует три возможных способа связи между компонентами. Ошибка, которую вы получаете, заключается в том, что в вашем компоненте нет свойства sidevav, а функция неопределенности не объявлена ​​для неопределенного члена.

Существуют определенные способы взаимодействия между компонентами.

Использованиеродная управляемая событиями связь.

Родитель-потомок через ввод (значение), потомок-родитель через вывод (событие). 

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

  constructor() { }

  emit() {
      this.toggle.emit(null);
  }
  • В вашем TopbarComponent Вы добавляете вышеуказанный код.

  • В вашем AppComponent вы привязываете к переключателю

и вВ этом файле вы создаете функцию переключения 

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

Затем вы передаете первое выбранное значение вашим компонентам и соответственно скрываете его.

Это официальный способ. Проверьте это решение, работающее с stackblitz здесь

Использование службы событий

Вы можете создать службу событий, из которой вы можете вызывать события, и мастер переключения может подписываться на них иШирокий выбор приложений. проверьте, например, здесь

Используйте библиотеку, чтобы поделиться состоянием через магазины

Проверьте документацию здесь

...