Angular双Mat-Sidenav覆盖主表格问题求助

问题根源 #

你当前的问题出在两点：

1. 两个mat-sidenav都使用mode="side"模式，该模式下侧边栏会固定在页面一侧，不会触发主内容的推送逻辑；且同位置的两个侧边栏会重叠渲染，导致表格被覆盖。
2. 未处理侧边栏的互斥逻辑，可能出现两个侧边栏同时打开的情况，进一步加剧布局混乱。

解决方案 #

1. 切换侧边栏模式为push

将两个mat-sidenav的mode属性改为push，该模式会在侧边栏打开时自动推送主内容区域，避免覆盖。

2. 实现侧边栏互斥逻辑

确保同一时间只有一个侧边栏处于打开状态，打开一个时自动关闭另一个。

3. 修复代码语法错误

取消sidenav2的注释，并修正按钮属性的空格问题。

修改后的完整代码 #

HTML模板

<mat-sidenav-container class="example-container" [hasBackdrop]="false">

    <mat-sidenav #sidenav1 mode="push" position="end" class="custom-drawer">
        <div class="header">
            <h4>Ajout d'un rôle</h4>
            <bl-button [iconClass]="'ph-x'" (click)="closeDrawer1()" [iconButton]="true"></bl-button>
        </div>
        <mat-divider></mat-divider>
        <role-add class="form"></role-add>
    </mat-sidenav>

    <mat-sidenav #sidenav2 mode="push" position="end" class="custom-drawer">
        <div class="header">
            <h4>Modifier un role</h4>
            <bl-button [iconClass]="'ph-x'" (click)="closeDrawer2()" [iconButton]="true"></bl-button>
        </div>
        <mat-divider></mat-divider>
        <role-modif class="form"></role-modif>
    </mat-sidenav>

    <mat-sidenav-content class="content">
        <bl-table [config]="config" [testLabelValue]="'table-example-1'" id="bl-example-table-sample"></bl-table>
    </mat-sidenav-content>
</mat-sidenav-container>

组件类关键修改

// 初始化表格数据时，添加新增侧边栏的互斥逻辑
private initDataTable(){
    this.datasource = new MatTableDataSource<any>();
    this.applicationService.rolesList().subscribe(data=> {
        this.datasource.data = data.map(item =>({
            application:item.application.applicationCode,
            role_code:item.roleCode,
            role_name:item.roleName,
            checked:item.state,
            state: item.state
        }));
    });
    // 打开新增侧边栏前先关闭修改侧边栏
    this.addEvent.subscribe(()=> {
        this.sidenav2.close();
        this.sidenav1.toggle();
    });
}

// 修改按钮事件中添加互斥逻辑
private getColumnAction(){
    this.actionModifyColumn.eventEmitter = new EventEmitter();
    this.actionModifyColumn.eventEmitter.subscribe((value) => {
        console.log(value);
        // 打开修改侧边栏前先关闭新增侧边栏
        this.sidenav1.close();
        this.sidenav2.toggle();
        this.applicationService.sendEvent(value);
        this.layoutRepository.openContentRightPanel();
    });

    this.actionDeleteColumn.eventEmitter = new EventEmitter();
    this.actionDeleteColumn.eventEmitter.subscribe(() => {
        this.openDialog();
        console.log("hello delete");
    });

    return [this.actionModifyColumn,this.actionDeleteColumn];
}

// 修正关闭方法为直接关闭而非切换
closeDrawer1(){
    this.sidenav1.close();
}

closeDrawer2(){
    this.sidenav2.close();
}

样式补充（可选）

确保容器占满可用空间，保证推送效果正常：

.example-container {
    height: 100vh;
    width: 100%;
}

.content {
    padding: 16px;
}

.custom-drawer {
    width: 350px; // 根据需求自定义侧边栏宽度
}

内容的提问来源于stack exchange，提问作者anass sbai