Angular 5中如何在嵌套组件中使用Flex Layout？

Hey there! I’ve worked with Angular 5 + Flex Layout on nested component setups before, so let’s walk through how to get your responsive layout up and running smoothly. The key is to layer Flex containers from the root down to your child components, using Flex Layout’s built-in breakpoints to adapt to different screen sizes.

Step 1: Install Correct Flex Layout Version for Angular 5 #

First, make sure you’re using the version of Flex Layout compatible with Angular 5 (newer versions won’t work). Run this command in your project:

npm install @angular/flex-layout@5.0.0-beta.14 @angular/cdk@5.2.4

Then import FlexLayoutModule into your root AppModule:

// app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    // ... other imports
    FlexLayoutModule
  ]
})
export class AppModule { }

Step 2: Set Up the Root Container (app.component.html) #

Your root component is the top-level Flex container that holds both app-layout-header and app-layout-view. We’ll use a column layout to stack the header above the content view, and ensure it fills the entire viewport:

<!-- app.component.html -->
<div fxLayout="column" fxFlexFill>
  <!-- Header component: holds sidebar + top nav -->
  <app-layout-header></app-layout-header>
  
  <!-- Content view: holds data tables/grids (uses remaining space) -->
  <app-layout-view fxFlex></app-layout-view>
</div>

Add this global style to styles.css to ensure the viewport fills correctly:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Step 3: Build Responsive Layout in app-layout-header #

This component needs to handle both the top navigation bar and sidebar, with responsive behavior (sidebar hides on mobile, replaced by a hamburger toggle). Here’s how to structure its template:

<!-- layout-header.component.html -->
<div fxLayout="row" fxFlexFill>
  <!-- Desktop Sidebar: hidden on mobile -->
  <div fxLayout="column" 
       fxFlex="250px" 
       fxHide.lt-md
       style="background: #f5f5f5; padding: 16px;">
    <div>Sidebar Menu Item 1</div>
    <div>Sidebar Menu Item 2</div>
    <div>Sidebar Menu Item 3</div>
  </div>

  <!-- Top Navigation Bar -->
  <div fxLayout="row" 
       fxFlex 
       fxLayoutAlign="space-between center"
       style="background: #1976d2; color: white; padding: 0 16px; height: 64px;">
    <!-- Mobile Hamburger Toggle -->
    <button fxShow.lt-md (click)="toggleMobileSidebar()">☰</button>
    <div>My Angular App</div>
    <div>User Profile</div>
  </div>

  <!-- Mobile Sidebar: shown only when toggled -->
  <div *ngIf="mobileSidebarOpen" 
       fxLayout="column" 
       fxFlexFill
       style="position: fixed; top: 64px; left: 0; bottom: 0; width: 250px; background: #f5f5f5; z-index: 1000; padding: 16px;">
    <div>Sidebar Menu Item 1</div>
    <div>Sidebar Menu Item 2</div>
    <div>Sidebar Menu Item 3</div>
  </div>
</div>

Add the toggle logic to the component class:

// layout-header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-layout-header',
  templateUrl: './layout-header.component.html',
  styleUrls: ['./layout-header.component.css']
})
export class LayoutHeaderComponent {
  mobileSidebarOpen = false;

  toggleMobileSidebar() {
    this.mobileSidebarOpen = !this.mobileSidebarOpen;
  }
}

Key Flex directives here:

• fxHide.lt-md: Hides the desktop sidebar on screens smaller than medium (tablets/phones)
• fxShow.lt-md: Shows the hamburger button only on mobile
• fxLayoutAlign="space-between center": Positions top nav elements evenly with vertical centering

Step 4: Make app-layout-view Responsive #

This component holds your data tables or grids. Use Flex Layout to adjust the layout based on screen size—for example, switching from a 3-column grid on desktop to 1-column on mobile, or hiding non-critical table columns on small screens:

<!-- layout-view.component.html -->
<div fxLayout="column" fxFlexFill style="padding: 16px;">
  <!-- Responsive Grid Layout -->
  <div fxLayout="row wrap" fxLayoutGap="16px" style="margin-bottom: 24px;">
    <!-- Grid Cards: 3 columns on desktop, 2 on tablet, 1 on mobile -->
    <div fxFlex="calc(33.33% - 16px)" 
         fxFlex.md="calc(50% - 16px)" 
         fxFlex.xs="100%"
         style="background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 16px;">
      Data Card 1
    </div>
    <div fxFlex="calc(33.33% - 16px)" 
         fxFlex.md="calc(50% - 16px)" 
         fxFlex.xs="100%"
         style="background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 16px;">
      Data Card 2
    </div>
    <div fxFlex="calc(33.33% - 16px)" 
         fxFlex.md="calc(50% - 16px)" 
         fxFlex.xs="100%"
         style="background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 16px;">
      Data Card 3
    </div>
  </div>

  <!-- Responsive Data Table -->
  <table style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr style="background: #f5f5f5;">
        <th style="padding: 8px; text-align: left;">ID</th>
        <th fxHide.lt-md style="padding: 8px; text-align: left;">Detailed Info</th>
        <th style="padding: 8px; text-align: left;">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 8px; border-top: 1px solid #eee;">1</td>
        <td fxHide.lt-md style="padding: 8px; border-top: 1px solid #eee;">User A's Detailed Data</td>
        <td style="padding: 8px; border-top: 1px solid #eee;"><button>Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>

Key Flex directives here:

• fxLayout="row wrap": Lets grid cards wrap to new rows when there’s not enough space
• fxFlex.[breakpoint]: Adjusts card width for different screen sizes
• fxHide.lt-md: Hides the "Detailed Info" table column on mobile to save space

Key Takeaways #

• Layer Flex containers: Each component should manage its own Flex layout, nested within the parent’s container
• Use breakpoints: Leverage Flex Layout’s built-in breakpoints (xs, sm, md, lg, xl) to adapt layouts
• Fill viewport correctly: Ensure html/body have 100% height so fxFlexFill works as expected

内容的提问来源于stack exchange，提问作者Code is Cheap Show me The Talk