Angular：使用打开和关闭sidenav（Angular Materials）使div填充剩余的水平空间

Posted 2023-03-05

【中文标题】Angular：使用打开和关闭sidenav（Angular Materials）使div填充剩余的水平空间

【英文标题】：Angular: Make div fill remaining horizontal space with opening and closing sidenav (Angular Materials)

【发布时间】：2021-10-06 16:38:30

【问题描述】：

简介

我有一个页面，展示了一个可以打开和关闭的 Angular Material sidenav。我将该组件放在一个 div 中，该 div 还引入了一个工作区组件（因页面而异），该组件应占用页面上的剩余空间。鉴于 sidenav 能够打开和关闭，它需要是动态的。

sidedraw.component.html

<div style="display: flex;">
  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav
      class="sidenav"
      #sidenav
      mode="side"
      [(opened)]="isShown"
      (opened)="isShown = true"
      (closed)="isShown = false"
    >
      Sidenav content
    </mat-sidenav>
  
    <mat-sidenav-content>
        <p>
          <button class="toggleButton" mat-button (click)="sidenav.toggle()">
            <img *ngIf="isShown" src="../../../assets/icons/arrow-left.png" />
            <img *ngIf="!isShown" src="../../../assets/icons/arrow-right.png" />
          </button>
    </mat-sidenav-content>
  </mat-sidenav-container>
  <ng-container *ngComponentOutlet='workspaceComponent'></ng-container>
</div>

倒数第二行的workspaceComponent 由以下因素决定：

sidedraw.component.ts

import  Component  from '@angular/core';
import  EstimatesworkspaceComponent  from 'src/app/workspaces/estimatesworkspace/estimatesworkspace.component';

@Component(
  selector: 'app-sidedraw',
  templateUrl: './sidedraw.component.html',
  styleUrls: ['./sidedraw.component.css'],
)
export class SidedrawComponent 
  isShown = true;
  workspaceComponent = EstimatesworkspaceComponent;

稍后我计划让workspaceComponent 更有活力，但我还没有做到。

问题

无论我尝试什么，我都无法让 workspaceComponent 填充页面的其余部分。

目前我的组件模板和相关样式表如下：

estimatesworkspace.component.html

<div class='request-container'> 
    Please enter the name of the business whose value you would like an estimate for
</div>

估计workspace.component.css

.request-container 
    display: flex;
    flex-grow: 1;
    width: 100%;
    margin-top: 5%;
    text-align: center;

该代码导致显示以下内容：

我已经尝试了display: flex 和flex-grow: grow 或flex-grow:1 任何我能想到但似乎无法找到解决方案的地方。任何建议将不胜感激。

【问题讨论】：

给出一个堆栈闪电战或代码沙箱示例来查看您的问题。我认为该按钮在我看来应该是绝对的，以实现您正在寻找的东西。

【参考方案1】：

工作区组件应该在侧导航内容内

<mat-sidenav-content>
    <div style="width: 100%">
        <button class="toggleButton" mat-button (click)="sidenav.toggle()">
            <img *ngIf="isShown" src="../../../assets/icons/arrow-left.png" />
            <img *ngIf="!isShown" src="../../../assets/icons/arrow-right.png" />
          </button>
        
        <ng-container *ngComponentOutlet='workspaceComponent'></ng-container>
    </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

【讨论】：

不幸的是，这不起作用，它所做的只是将workingComponent 放在打开/关闭按钮下方，这不是我想要的......

好的，但这是正确的方法，你必须给打开关闭按钮的绝对位置

内容必须在 ma-sidenav-content 中

让我知道是否为按钮提供绝对位置以及将其定位在左侧和顶部的一些样式是否有效