Angular 6 Material。如何为 mat-sidenav-container 制作橡胶？

Question

我有使用 Angular Material 6 生成的响应式 mat-sidenav。导航面板的 Open/close 按钮工作得很好，但是导航面板是打开的面板，模糊了部分内容。

如何让内容部分像橡皮一样：

<!--CONTENT-->
<main>
    <router-outlet></router-outlet>
</main>

我的意思是当导航栏关闭时内容宽度为页面的 100%。但是当导航栏打开然后内容压缩到 85% (我的导航栏有 width: 15%)

这是模板：

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        mode="side"
        #drawer
        class="sidenav"
        [(opened)]="isOpened"
        fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async)"
    >
        <mat-nav-list>
            <span
                *ngFor="let link of links"
                routerLinkActive="active"
            >
                <a mat-list-item [routerLink]="[link.url]">
                    {{link.name}}
                </a>
            </span>
            <span style="position: absolute; bottom: 1px; width: 100%">
                <a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
                    Выйти
                </a>
            </span>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">

            <button mat-icon-button (click)="drawer.toggle()">
                <mat-icon>menu</mat-icon>
            </button>
            <span style="margin-left: 45%">Oasis Bot Manager</span>
        </mat-toolbar>
    </mat-sidenav-content>
</mat-sidenav-container>

<!--CONTENT-->
<main [ngStyle]="{'width': isOpened ? '85%' : '100%'}">
    <router-outlet></router-outlet>
</main>

TypeScript 端：

export class SiteLayoutComponent {
    links = [
        {url: '/vds_list', name: 'Статистика'},
        {url: '/profile', name: 'Личный кабинет'}
    ];

    isOpened;

    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
        .pipe(
            map(result => result.matches)
        );

    constructor(private breakpointObserver: BreakpointObserver,
                private auth: AuthService,
                private router: Router) {
    }

    logout(event: Event) {
        event.preventDefault();
        this.auth.logout();
        this.router.navigate(['/login']);
    }
}

我正在尝试将 width 的内容通过 [ngStyle] 绑定到 mat-sidenav 的 [(opened)]="isOpened" 状态。

但是不行。如何解决这种情况？

Answer 1

您的内容区域需要位于工具栏下方的 mat-sidenav-container 内：

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav
        mode="side"
        #drawer
        class="sidenav"
        [(opened)]="isOpened"
        fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async)"
    >
        <mat-nav-list>
            <span
                *ngFor="let link of links"
                routerLinkActive="active"
            >
                <a mat-list-item [routerLink]="[link.url]">
                    {{link.name}}
                </a>
            </span>
            <span style="position: absolute; bottom: 1px; width: 100%">
                <a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
                    Выйти
                </a>
            </span>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content style="display:flex; flex-direction:column;">
        <mat-toolbar color="primary">

            <button mat-icon-button (click)="drawer.toggle()">
                <mat-icon>menu</mat-icon>
            </button>
            <span style="margin-left: 45%">Oasis Bot Manager</span>
        </mat-toolbar>
        <!--CONTENT-->
        <main>
            <router-outlet></router-outlet>
        </main>
    </mat-sidenav-content>
</mat-sidenav-container>