在父组件末尾打开 angular material 侧边栏

Question

我有一个 angular material sidenav，当我打开它时，sidenav 总是在 window

的左侧对齐

但我想始终在具有蓝色背景的组件末尾打开它，就像在这个屏幕中：

这是我的蓝色背景组件，我也在这里添加了 mat-sidenav-container 来自 angular material:

的元素

<div class="nav">
  <div class="logo">
  </div>
  <div class="nav-links">
   <button (click)="sidenav.toggle()">Open</button>
  </div>
  <div class="nav-items">
  </div>

  <mat-sidenav-container>
   <mat-sidenav #sidenav [mode]="'side'">
    <p>Content</p>
   </mat-sidenav>
  </mat-sidenav-container>
</div>

您知道如何在第二个屏幕中打开 sidenav 菜单吗？谢谢

Answer 1

我认为您正在寻找这种行为：https://stackblitz.com/edit/angular-sidenav-example

我正在使用 @angular/flex-layout 来处理布局。

<mat-toolbar color="primary">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1>Responsive App</h1>
</mat-toolbar>

<div fxLayout="row">
    <div fxFlex="10">
        logo
    </div>


    <mat-drawer-container>
        <mat-drawer #snav [mode]="'side'">
            <mat-nav-list>
                <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
            </mat-nav-list>
        </mat-drawer>

        <mat-drawer-content>
            <p *ngFor="let content of fillerContent">{{content}}</p>
        </mat-drawer-content>
    </mat-drawer-container>
</div>

在父组件末尾打开 angular material 侧边栏

Open angular material sidebar at the end of parent component

angular

angular-material2

sidenav