Question

我正在尝试测试angular4材质中的sidenav功能。从我可以从谷歌收集的任何信息。我做了这个傻瓜。 https://plnkr.co/edit/4VfijY?p=preview

<md-sidenav-container>
  <md-sidenav #sidenav mode="side" opened="true">
    <md-nav-list>
      <a md-list-item>
        Home
      </a>
      <a md-list-item>
        Channels
      </a>
    </md-nav-list>
  </md-sidenav>
</md-sidenav-container>

有人能指出我做错了什么吗？我可以用另一双眼睛。

此外，如果有人成功地开展了工作，或者有一个好的教程，请你在这里分享一下吗？

非常感谢。

Answer 1

您的代码结构错误。要使用sidenav，您的所有html代码都应位于md-sidenav-container内。 sidenav.open()方法用于打开侧面导航。

这是有效的plunkr https://plnkr.co/edit/3Oalufvj8ieRzhYPq7RP?p=preview

<md-sidenav-container>
    <md-sidenav #sidenav>
        <md-nav-list>
            <a md-list-item>
        Home
      </a>
            <a md-list-item>
        Channels
      </a>
        </md-nav-list>
    </md-sidenav>

    <!--***** html part of page should be inside sidenav here *****-->
    <div style="height: 700px;">
        <md-toolbar color="primary">
            Angular Material 2 App
        </md-toolbar>
        <div style="text-align: center;">
            <button md-button (click)="sidenav.open()">Open sidenav</button>
            <p>
                <md-slide-toggle>Slide Toggle</md-slide-toggle>
            </p>
        </div>
    </div>

</md-sidenav-container>

了解更多信息，请阅读此https://material.angular.io/components/component/sidenav

我希望这会有所帮助：）

Answer 2

您安装了Angular2材料包吗？使用npm命令，如：

npm i --save @ angular / material

Angular4材料sidenav无法正常工作

2 个答案: