如何在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锁定打开并且永远不会关闭,直到窗口收缩到media-size以下.这不是我想要的.

如果我根本不使用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 版本时似乎会出现很多问题。

请参阅文档中的右侧导航示例侧面导航材料设计