Angular4物料侧导航不工作

我试图在angular4材料中测试sidenav的功能。从谷歌收集到的任何信息。这是我做的。

家
渠道

有人能指出我做错了什么吗？。我需要另一双眼睛

另外，如果有人已经成功地制作了一个工作sidenav或有一个很好的教程，你能在这里分享吗

---

非常感谢。

您的代码结构错误。要使sidenav正常工作，所有html代码都应该在

md sidenav容器中

sidenav.open（）

方法用于打开侧导航

这是有效的

我希望这会有所帮助：）
您是否安装了Angular2材料包？使用npm命令，如：

npm i--save@angular/material
我制作了一个基于angular cli和material的初学者，但它也使用了ngrx：如果你不熟悉Redux，你应该先了解更多关于Redux的内容，或者只是看看你对sidenav感兴趣的内容，不要太关注初学者本身。这需要一些时间来理解你想做什么，但它真的很棒，并且明确地教你如何组织和缩放angular2/4应用程序。感谢Amit Kumar，我认为这是正确的解决方案。我还有一个问题，当mode=“side”时，我们如何在工具栏下方获得sidenav。有什么想法吗？@code将工具栏放在sidenav外。尝试一些位置样式，如绝对或相对。希望这会有帮助。也别忘了记正确，接受我的答案。若你们仍然面临这个问题，那个就在LinkedIn上给我发个短信。我会尽力帮助你：）
<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>

<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>