fxLayoutコンテナをネストするのは良い方法ですか？

Question

最近、最初にangle/flexを使い始めましたが、レイアウトコンテナのネストについてはわかりません。以下のコードでは、ナビゲーションタグは、左に開き、コンテンツの残りの部分を右にプッシュする角度素材のサイドページです。私はこの時点で気づいた（私がちょうど始めたとき、これはそうではなかった）。私が開いている/閉じているときに、sidenavが少し遅れているようだ。数秒間アニメーションの途中で凍結した後、完全に開いたり閉じたりします。私は1列fxLayoutコンテナに列と複数の行fxLayoutをネストし、それがsidenavアニメーションのパフォーマンスの問題の理由かもしれないと思いますか？パフォーマンス上の問題につながるこれらのすべてのコンテナを入れ子にすることで、複雑な作業を繰り返していますか？

私のコード：

<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 &amp; Angular(Angular-material &amp; 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> &raquo; Ledger system &raquo; Sales ledger &raquo; 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> 

Answer 1

通常あなたがmat-sidenav-container内の関連する主要なコンテンツを包みます。

material docsにはいくつかの例があります。あなたのケースでは

、いずれかのビューのコードのすべてあなたが投稿した、または多分ちょうどあなたのダッシュボードのコードは、すでにナビゲーションタグでこれをやっている場合は、私が言うことができないmat-sidenav-container