在父组件

Question

我有一个有角度的材料sidenav，当我打开它时，sidenav它总是在窗口的左侧位置对齐

但我想在蓝色背景的组件末端打开它，就像在这个屏幕中一样：

这里是我的蓝色背景组件，我还在这里添加了 mat-sidenav-container 元素来自角度材料：

<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>