如何从 ngx store 控制离子菜单状态？

Question

我正在通过查看 example app 来学习 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 控制菜单并执行 cool stuff like that。

不幸的是，<ion-menu>没有这个[open]属性。所以，我的问题是 如何在 Ionic 中编写相同的行为代码？

几个想法：

订阅 showSidenav$ 观察者并触发 this.menu.setOpen(<showSidenav$ value>) 并相应地调度一个动作。问题是，我真的不确定它是否会起作用，你认为这会产生与视频中相同的行为吗（参见 link 类似的酷东西）？
[通过回答在此处添加您的想法:)]

Answer 1

我是这样做的：

我得到我的菜单的 ref 并实例化将在 HTML 中注入的布尔变量：
```
@ViewChild('menu', { static: false }) menu: IonMenu;
menuOpen = false;
```

在构造函数中，我订阅了我的布局缩减器并监听变化

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

    });
}

每次打开或关闭菜单 (ionWillOpen) 和 (ionWillClose) 时我都会调用这些方法：

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

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

如何从 ngx store 控制离子菜单状态？

How to control ion-menu state from ngx store?

angular

ionic-framework

ionic4

ngrx

ngrx-store