Как контролировать состояние ионного меню из магазина ngx?

Question

Я изучаю ngx store (я уже знаю Redux), глядя на пример приложения .Там они используют компонент <bc-sidenav>, и, как вы можете видеть, он имеет атрибут open:

<bc-sidenav [open]="showSidenav$ | async">
     <!-- ... -->
</bc-sidenav>

showSidenav$: Observable<boolean>;

constructor(private store: Store<fromRoot.State>) {
    /**
    * Selectors can be applied with the `select` operator which passes the state
    * tree to the provided selector
    */
    this.showSidenav$ = this.store.select(fromRoot.getShowSidenav);
}

Это позволяет управлять меню из ngx store и выполнять такие классные вещи .

К сожалению , <ion-menu> не имеет этого атрибута [open].Итак, мой вопрос Как мне кодировать такое же поведение в Ionic?

Несколько идей:

• Подписка наshowSidenav$ наблюдатель и запуск this.menu.setOpen(<showSidenav$ value>) и отправка действия соответственно.Дело в том, что я действительно не уверен, сработает ли это, как вы думаете, это создаст то же поведение, что и в видео (см. Ссылку на такие интересные вещи)?

• [Добавьте свои идеи здесь, ответив:)]

Answer 1

Я сделал это так:

1. Я получаю ссылку на свое меню и создаю экземпляр логической переменной, которая будет вставлена ​​в HTML:

   @ViewChild('menu', { static: false }) menu: IonMenu;
   menuOpen = false;
   

2. Вконструктор, я подписываюсь на свой редуктор макета и прислушиваюсь к изменениям

   constructor(private menuController: MenuController, private store: Store<AppState>) {
       store.select('layout').subscribe((layout) => {
           if (layout === null || layout === undefined) { return; }
           this.menuOpen = layout.menuOpen;
   
       });
   }
   

3. Я отправляю действие каждый раз, когда меню открывается или закрывается (ionWillOpen) и (ionWillClose) вызывает ихметоды:

   openMenu() {
       this.store.dispatch(new LayoutActions.OpenMenu());
   }
   
   closeMenu() {
       this.store.dispatch(new LayoutActions.CloseMenu());
   }