我最近第一次开始使用angular/flex，并且不确定如何嵌套布局容器。在下面的代码中，导航标签是一个angular-material侧边栏，它打开在左侧，然后将其余内容推向右侧。我注意到这一点（当我刚开始时不是这样的），最近侧边栏似乎有些滞后，当我打开/关闭它时。它在动画进行到一半时会冻结几秒钟，然后完全打开/关闭。我在一个行fxLayout容器中嵌套了列和更多的行fxLayout容器，我认为这可能是侧边栏动画性能问题的原因？我是否过于复杂地嵌套了所有这些容器，从而导致性能问题？
我的代码：
我的代码：
<div fxLayout fxAlign="start start">
<mat-toolbar color="primary">
<button mat-icon-button (click)="toggleSidenav()">
<mat-icon aria-label="menu">
<i class="material-icons">restaurant_menu</i>
</mat-icon>
</button>
<span>POC Toolbar</span>
<span class="fill-remaining-space"></span>
<div class="rhs">
<mat-icon class="rhs-icon fa fa-home fa-lg"></mat-icon>
<span class="rhs-item">Home</span>
<mat-icon class="rhs-icon fa fa-sign-out fa-lg" aria-hidden="true"></mat-icon>
<span class="rhs-item">Logout</span>
<mat-icon class="rhs-icon fa fa-key fa-lg"></mat-icon>
<span class="rhs-item">Password</span>
<mat-icon class="rhs-icon fa fa-sitemap fa-lg"></mat-icon>
<span class="rhs-item">Site map</span>
</div>
</mat-toolbar>
</div>
<div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
<div fxFlex>
<navigation [state]="showMenu"></navigation>
</div>
<div fxFlex="100%">
<div fxLayout="column" fxLayoutGap="20px">
<div>
<h1>Dashboard</h1>
</div>
<div>
<p>Lorem ipsum dolor sit amet, eum iuvaret delicata at. Eu postea commodo persius mei. Id est semper constituto, ignota aperiri adversarium ne vix. Id est impetus suscipit, nulla meliore epicuri id eos. Ad pro modo albucius atomorum. At mel ullum libris debitis, in vero apeirian mediocrem mei.</p>
</div>
<div>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div>
<h2>Sample Angular/Flex Column Layout</h2>
</div>
</div>
<div fxLayout fxLayoutGap="15px">
<div fxFlex="33%">
<h3>Notes</h3>
<ul>
<li>we're using responsive css & Angular(Angular-material & Angular/flex) This allows us to show (or hide) things like the left menu and the number of columns displayed by dataTables.</li>
<li>The amount of "Custom" css we've used is actually very little, prefering rather to make use of the framework's built in features.</li>
<li>Angular reactive forms and validators should probably replace the generic php form.</li>
<li>No server side php is used.</li>
</ul>
</div>
<div fxFlex="33%">
<h3>Example views</h3>
<ul>
<li><a href="#">Login Screen</a></li>
<li><a href="#">Home Page</a> » Ledger system » Sales ledger » Customer master files</li>
<li><a href="#">Customer Master Search</a></li>
<li><a href="#">Customer Master List</a></li>
<li><a href="#">detail Customer Master</a></li>
<li><a href="#">update Customer Master</a></li>
<li><a href="#">detail Account</a> - Click on suburb <i class="fa fa-info-circle"></i></li>
<li><a href="#">Lookup Screen(Generic)</a> - Click on suburb <i class="fa fa-search"></i></li>
</ul>
</div>
<div fxFlex="33%">
<h3>Keyboard Shortcuts</h3>
<ul>
<li><Ctrl + b: Go back/li>
<li>Ctrl + i: Launch info</li>
<li>Ctrl + h: Launch help</li>
<li>Ctrl + l: Show or hide menu</li>
<li>Ctrl + n: Add new item</li>
<li>Ctrl + p: Print</li>
<li>Ctrl + r: reload table data</li>
<li>Ctrl + <em>any other</em> page specific function you ned</li>
</ul>
</div>
</div>
</div>
</div>
my navigation component html:
<mat-sidenav-container position="start" class="custom-sidenav-container">
<mat-sidenav #sidenav mode="side" opened="false">
Navigation
<ul class="sn-list">
<li>
<mat-icon class="sn-item">
<i class="material-icons">dashboard</i>
</mat-icon>
<a class="sn-item" href="#">Dashboard</a>
</li>
<li>
<mat-icon class="sn-item">
<i class="material-icons">archive</i>
</mat-icon>
<span class="sn-item" [matMenuTriggerFor]="stockSystemMenu">Stok System</span>
<mat-menu [overlapTrigger]="false" #stockSystemMenu="matMenu">
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 1</span>
</button>
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 2</span>
</button>
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 3</span>
</button>
</mat-menu>
</li>
<li>
<mat-icon class="sn-item">
<i class="material-icons">shopping_cart</i>
</mat-icon>
<span class="sn-item" [matMenuTriggerFor]="salesMenu">Sales / Purchases</span>
<mat-menu [overlapTrigger]="false" #salesMenu="matMenu">
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 1</span>
</button>
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 2</span>
</button>
<button mat-menu-item>
<mat-icon class="sn-item">
<i class="material-icons">chevron_right</i>
</mat-icon>
<span class="sn-item">Service 3</span>
</button>
</mat-menu>
</li> </ul>
</mat-sidenav>
<div class="sn-content">
</div>
</mat-sidenav-container>
div的子元素设置样式吗？如果是这样，你应该使用fxLayoutAlign。至于你的侧边栏渲染问题，你需要同时发布导航组件的代码。你可能没有正确实现侧边栏容器，但我无法在没有看到代码的情况下知道。 - endermat-sidenav-container中。Material文档中提供了一些示例。在您的情况下，您发布的所有查看代码或可能只是您的仪表盘代码都应包含在mat-sidenav-container中。 - ender