Question

在Angular 6中，我使用的是side-nav材质，也使用的是材质树：

父母：

<mat-sidenav-container class="sidenav-container" autosize>

  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="false"
    [mode]="sidenavMode"
    [opened]="sideNavOpen"
    (closed)="sideNavOpen = false"
    [ngClass]=" !sideNavOpen ? 'showToggle' : '' ">  

    <app-side-nav (toggledSidebarCollapse)="toggleSideBar()"></app-side-nav>

  </mat-sidenav>

  <mat-sidenav-content
    autosize
    fullscreen
    [style.height.px]="windowHeight()"
    [ngClass]=" !sideNavOpen ? 'body-conainer_collapse-view' : 'body-conainer_open-view' "
    color="primary">

    <mat-toolbar >

      <span>HOME</span>
    </mat-toolbar>

    <ng-container *ngIf="iframeDisplay">
      <iframe width="100%" height="100%" [src]="iframeUrl | safeUrl" scrolling="yes"></iframe>
    </ng-container>


  </mat-sidenav-content>

</mat-sidenav-container>

孩子：

<div class="header" fxLayout="row" fxLayoutAlign="start center">

  ...

<div class="mat-tree_container">  
  <mat-nav-list>
    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="tree">

      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
        <a class="mat-tree-node link-item">
          <button class="side-bar-button" mat-icon-button>
            <mat-icon class="mat-icon-rtl-mirror">
              insert_drive_file
            </mat-icon>
          </button>
          {{node.reportName}}
        </a>
      </mat-tree-node>

      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
        <li>
          <div class="mat-tree-node">
            <button class="side-bar-button" mat-icon-button matTreeNodeToggle
                    [attr.aria-label]="'toggle ' + node.reportName">
              <mat-icon class="mat-icon-rtl-mirror">
                {{nestedTreeControl.isExpanded(node) ? 'folder_open' : 'folder'}}
              </mat-icon>
            </button>
            {{node.reportName}}
          </div>
          <ul [class.tree-invisible]="!nestedTreeControl.isExpanded(node)">
            <ng-container matTreeNodeOutlet></ng-container>
          </ul>
        </li>
      </mat-nested-tree-node>

    </mat-tree>
  </mat-nav-list> 
</div>

但是，我得到的数据是动态的。它可能嵌套x深度。使用材质树，它可能会超出我设置的宽度（240px）。

材料的mat-side-nav似乎不支持水平滚动。如果文件夹结构超过了宽度，则sidenav仅使用断字，并且不允许水平滚动。

只是尝试在mat-side-nav内部启用水平滚动...

更新：尝试使用“空白：nowrap”样式。仅影响添加到顶层的任何内容（mat-sidenav）。然后启用了滚动-但产生了以下内容：

似乎没有大量的CSS可以扩展宽度以适应溢出。

Answer 1

最有可能的是，这是节点组件本身，而不是sidenav。尝试将white-space:no-wrap;添加到mat-tree-node类中。根据sidenav抽屉中的内容，您可能需要在其他位置添加无包装纸或以其他方式控制布局，以便水平滚动条可以由父组件显示。

Answer 2

当前有效（但可能不是最佳）的解决方案-感谢@gtranter的回复。

mat-sidenav {
  ...  
  white-space: nowrap;
  display: flex;
}
...
// for the width of the header -- if not increased - does not fill the space 
    especially after the sidebar width increases when opening folders
.header {
  ...
  width: calc(100% + 55px);
  ...
}

这允许水平滚动并在您继续打开新文件夹时调整为新大小-无可预见的限制。定期使用关闭的文件夹（不带滚动条）来适应sidenav的大小-滚动条在需要时启用。

角度6-材质sidenav水平滚动

2 个答案: