如何在 Angular-Material Design 中固定打开 sideNav

Question

我一直在使用

<md-sidenav md-component-id="leftNav" md-is-open="vm.isOpen"
            md-is-locked-open="vm.isPinned" ... >
    <i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i>
    ...
</md-sidenav>

使用控制器中的 toggleNave 方法设置值

class MyController {
    constructor($mdSideNav) {
        this.mdSideNav = mdSideNav;
        this.isPinned = false;
        this.isOpen = false;
    }

    toggleNav = (navId) => {
        this.$mdSideNav(navId).toggle().then( () => {
            this.isPinned = this.isOpen;
        }
    }
}

但这会导致屏幕在打开和关闭时闪烁，这似乎不是固定打开 sideNav 的最佳方式。

希望中殿切换开关打开/关闭，但在我关闭它之前保持粘性打开。

如果我使用 md-is-locked="$media('')" 那么 sideNav 锁定打开并且永远不会关闭，直到窗口缩小到媒体大小以下。这不是我想要的。

如果我根本不使用 md-is-locked，那么当您点击离开它时，sideNav 会折叠关闭，但我希望它保持打开状态！直到我想关闭它。

有人知道怎么做吗？

谢谢

顺便说一句：我使用的是 ES6，因此使用了类和箭头函数。 :-)

Answer 1

通过查看文档，我认为您不需要使用 isPinned 和 isOpen 变量，因为它看起来像切换函数处理它。

因此，这个

toggleNav = (navId) => {
    this.$mdSideNav(navId).toggle().then( () => {
        this.isPinned = this.isOpen;
    }
}

会来

toggleNav = (navId) => {
    this.$mdSideNav(navId).toggle();
}

要完成这项工作，您需要通过 sideNav 的 id

所以这个

<i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i>

会变成

<i class="fa fa-bars float-right" ng-click="vm.toggleNav('leftNav')"></i>

最后，值得检查一下你正在使用的 Material Design 版本，不使用 >0.8 版本时似乎有很多问题。

请参阅文档Side Nav Material Design中的右侧导航示例