[英]Why does the sidenav only appear in the header in angular?
Why does the sidenav only appear in the header?为什么sidenav只出现在header中?
I have no idea what's wrong.我不知道出了什么问题。 app.component.html: app.component.html:
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation">
<app-sidenav-list (closeSidenav)="sidenav.close()"></app-sidenav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (sidenavToggle)="sidenav.toggle()"></app-header>
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
header.component.html: header.component.html:
<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button (click)="onToggleSidenav()">
<mat-icon>menu</mat-icon>
</button>
</div>
</mat-toolbar>
and sidenav-list.component.html:和 sidenav-list.component.html:
<mat-nav-list>
<a mat-list-item routerLink="/signup" (click)="onClose()">
<mat-icon>face</mat-icon>
<span class="nav-caption">Signup</span>
</a>
<a mat-list-item routerLink="/login" (click)="onClose()">
<mat-icon>input</mat-icon>
<span class="nav-caption">Login</span>
</a>
<mat-list-item>
<button mat-icon-button (click)="onClose()">
<mat-icon>eject</mat-icon>
<span class="nav-caption">Logout</span>
</button>
</mat-list-item>
</mat-nav-list>
Add the CSS
height property in your app.component.css
to the host and mat-sidenav-container.将 app.component.ZC7A62 app.component.css
中的CSS
高度属性添加到主机和 mat-sidenav-container。 Can add to the body
as well.也可以添加到body
中。
:host, body, .mat-sidenav-container { height: 100vh }
Hope it helps.希望能帮助到你。 Happy coding!快乐编码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.