Question

sidenav与页面的页面内容重叠，而不是向右移动页面内容：

侧面导航组件：app-mat-menu

var i;

for (i = 0; i < 2; i++) {
    console.log(i)
}

下面是主要的app.component.html：

<mat-sidenav id="sidenav" #mainsidenav mode="side" opened>

        <div routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <a>{{menuItem.title}}</a>
            </a>
        </div>
        <div *ngFor="let serviceItem of serviceItems" class="nav-item">
            <a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">{{serviceItem.icon}}</i>
                <a>{{serviceItem.title}}</a>
            </a>   
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <!--<li routerLinkActive="active" *ngFor="let item of serviceItem.submenu" class="nav nav-item dropdown-menu dropdown-item" aria-labelledby="navbarDropdownMenuLink">-->
                       <a *ngFor="let item of serviceItem.submenu" class="dropdown-item nav-link" [routerLink]="[item.path]">
                           <p>{{item.title}}</p>
                       </a>
                <!--</li>-->
            </div>     


        </div>


</mat-sidenav>
<mat-toolbar id="toolbar">
        <mat-toolbar-row id=toolbar1 fxLayout="row" fxLayoutAlign="center">
            <a> Welcome to Shared Services</a>
            <span class="fill-space"></span>

            <a  id="user" class="dropdown">
              <div dropdownToggle class="dropdown-toggle nav-link" data-toggle="dropdown">
                    <mat-icon>person</mat-icon>
              </div>
              <div dropdownMenu class="dropdown-menu">
                  <li><span  id="greeting">Hi! Manoj</span></li>
                  <li><a>Another Action</a></li>
                  <li [routerLink]="['/login']" name="logout" value="Log Out"><a id="logout">Log Out</a></li>
              </div>
            </a>

        </mat-toolbar-row>
        <mat-toolbar-row id=toolbar2 fxLayout="row" fxLayoutAlign="center">    
            <span><a><mat-icon (click)="mainsidenav.toggle()"> menu </mat-icon></a></span>
            <span class="fill-space"></span>
            <span><a class="nav-link" routerLink="/services"> Service Catalog </a></span>
            <span><a class="nav-link" routerLink="/dashboard"> Account </a></span>
            <span><a class="nav-link" routerLink="/dashboard"> Support </a></span>
        </mat-toolbar-row>

</mat-toolbar>

我没有提供任何与页面高度和宽度有关的自定义css属性。

Answer 1

除了sidenav之外，您还需要使用sidenav容器和sidenav内容组件。结构应如下所示：

<mat-sidenav-container>

  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>

  <mat-sidenav-content>Main content</mat-sidenav-content>

</mat-sidenav-container>

sidenav与页面内容重叠

1 个答案: