2
我最近開始第一次使用angular/flex並且不確定佈局容器的嵌套。在下面的代碼中，導航標記是一個角度材料sidenav，它在左側打開，然後將其餘內容推向右側。在這一點上我注意到了（當我剛剛開始的時候，它不是這樣的），當我打開/關閉它時，sidenav似乎遲了一點。它會在動畫片段中間凍結幾秒鐘，然後完全打開/關閉。我在一行fxLayout容器中嵌套列和更多行fxLayout容器，並認爲這可能是sidenav動畫性能問題的原因？通過嵌套所有這些導致性能問題的容器，我是否會複雜化？嵌套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>
如果你正在做這個已經在導航標籤我不能告訴，但我會建議使用材質sidenav組件[https://material.angular.io/components/sidenav/overview](https://material.angular.io/components/sidenav/overview） – ender
我正在使用材質sidenav組件。我使用fxLayout看起來好嗎/可以接受嗎？ – user2094257
它看起來很像大部分。正在嘗試設計第一個'div'的子元素嗎？如果是這樣，你應該使用'fxLayoutAlign'來代替。至於你的sidenav渲染問題，你也需要發佈你的導航組件的代碼。你可能會錯誤地實現sidenav-container，但是我不知道沒有看到代碼。 – ender