如何设置Angular 6 Material侧边栏从屏幕右侧向左展开？

嘿，我来帮你搞定这个问题！要让Angular Material的<mat-sidenav>从屏幕右侧向左展开，其实只需要一个简单的属性配置就能实现，不用复杂的自定义样式。

关键操作 #

• 给你的<mat-sidenav>元素添加position="end"属性——这是Angular Material内置的位置控制属性，专门用来指定侧边栏在容器的末端（LTR从左到右布局下就是右侧）。

修改后的完整代码示例 #

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" position="end" [(opened)]="opened" 
               (opened)="events.push('open!')" (closed)="events.push('close!')">
    Sidenav content
  </mat-sidenav>
  <mat-sidenav-content>
    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

补充说明 #

• 这个属性适用于所有sidenav的mode（side/over/push），不管你用哪种显示模式，position="end"都会让侧边栏固定在右侧，展开时向左滑入。
• 如果你的应用是RTL（从右到左）布局，position="end"会自动适配到左侧，完全符合布局方向的逻辑，不用额外调整。

内容的提问来源于stack exchange，提问作者Carl.G