Angular 角度5材料侧导航，无主要内容

我正在创建一个Angular 5站点，并试图让sidenav专门为较小的屏幕尺寸工作

（参考号：）

有没有一种方法可以实现sidenav而不必将主要内容放在元素中？我只需要一个带有链接的侧窗体，它不会显示，除非我添加

mat sidenav内容

并用数据填充它。我必须有以下格式：

<mat-sidenav-container>
  <mat-sidenav>
    <mat-nav-list>
      ..links..
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    ..content that fills screen..
  </mat-sidenav-content>
</mat-sidenav-container>

…链接。。
..填充屏幕的内容。。

我不希望需要

mat sidenav内容

。泛型MaterializeCSS框架不需要它：

从本质上说，我希望能够将标题与主要内容分开，但sidenav这件事迫使我将主要内容放在标题中

---

有什么想法吗？

mat sidenav元素的位置绝对正确。因此，它不会影响mat sidenav容器的高度。这可能会确保mat sidenav内容定义sidenav定位的内容区域的高度，并支持over模式。如果mat sidenav内容没有内容，mat sidenav容器将没有高度。显示没有内容的容器有三种可能的解决方案

将mat sidenav容器和所有块级父对象的高度设置为100%，直到定义最大可用空间的包含块。如果容器具有同级，则此操作将不起作用

html，body，.mat sidenav容器{
身高：100%；
}

在mat sidenav容器上设置静态高度

.mat sidenav容器{
高度：100px；
}

当没有内容时，使用指令将sidenav的位置设置为相对

@指令({
选择器：“mat sidenav容器[appSupportEmpty]”
})
导出类支持EmptySydenavDirective在ContentInit之后实现{
@ContentChild（MatSidenavContent，{read:ElementRef}）contentRef:ElementRef；
@ContentChildren（MatSidenav，{read:ElementRef}）sidenavRefs:ElementRef[]；
建造师(
专用容器：MatSidenavContainer，专用元素参考：元素参考
) { }
ngAfterContentInit（）{
如果（！this.contentRef.nativeElement.hasChildNodes（））{
this.sidenavRefs.forEach（ref=>ref.nativeElement.style.position='relative'）；
}
}
}

这会导致任何问题吗？我在mat sidenav中设置了我的应用程序，然后在mat sidenav内容中设置了我们的路由器出口，然后我们的头作为一个组件从那里加载。这并没有引起问题，只是对我来说很奇怪。您是否有能力打开/关闭您的侧导航？我们希望在左上角有一个汉堡包菜单，它只显示在打开/关闭侧导航的较小屏幕上。是的，嵌套组件完全可以调用服务来更改侧导航的内容/行为。