没有主要内容的 Angular 5 Material Sidenav

Question

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

(引用: https://material.angular.io/components/sidenav/overview )

有没有办法实现 sidenav 而不必将主要内容放在元素中？我只想要一个带有链接的侧面表格，除非我添加 mat-sidenav-content，否则它不会显示并用数据填充它。我必须有以下格式:

<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-content被要求。通用 MaterializeCSS 框架不需要它:http://materializecss.com/side-nav.html .

本质上，我希望能够将我的标题与主要内容分开，但是这个sidenav 事情迫使我将主要内容放在我的标题中......

有任何想法吗？

Answer 1

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

将 mat-sidenav-container 和所有块级父级的高度设置为 100%，直到定义最大可用空间的包含块。如果容器有 sibling ，这将不起作用。

StackBlitz Example

html, body, .mat-sidenav-container {
  height: 100%;
}

在 mat-sidenav-container 上设置静态高度。

StackBlitz Example

.mat-sidenav-container {
  height: 100px;
}

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

StackBlitz Example

@Directive({
  selector: 'mat-sidenav-container[appSupportEmpty]'
})
export class SupportEmptySidenavDirective implements AfterContentInit {
  @ContentChild(MatSidenavContent, { read: ElementRef }) contentRef: ElementRef<HTMLElement>;
  @ContentChildren(MatSidenav, { read: ElementRef }) sidenavRefs: ElementRef<HTMLElement>[];

  constructor(
    private container: MatSidenavContainer, private elementRef: ElementRef<HTMLElement>
  ) { }

  ngAfterContentInit() {
    if (!this.contentRef.nativeElement.hasChildNodes()) {
      this.sidenavRefs.forEach(ref => ref.nativeElement.style.position = 'relative');
    }
  }
}