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

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

有什么想法吗？

Answer 1

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

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

StackBlitz Example

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

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

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');
    }
  }
}

Angular 5 Material Sidenav没有主要内容

1 个答案: