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>)，并相应地调度一个动作。问题是，我真的不确定它是否会起作用，您是否认为这会产生与视频中相同的行为（参见链接类似的酷内容）？
[通过回答:)在这里添加您的想法

Answer 1

我是那样做的：

我得到菜单的引用，并实例化将注入HTML的布尔变量：

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

在构造函数中，我订阅了我的layout reducer并监听更改

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商店控制离子菜单状态？

1 个答案: