如何在Angular5静态屏幕尺寸下动态修改fxFlex值？

没问题，这个需求其实很好实现——Angular Flex Layout的fxFlex天生支持和组件属性绑定，咱们只需要把两列的flex值绑定到组件类里的变量，再通过按钮点击事件来修改这些变量就行，完全不用纠结当前屏幕处于哪个断点（毕竟静态尺寸下断点已经固定了）。

具体实现步骤 #

1. 调整模板代码，绑定fxFlex到组件变量

把原来硬编码的fxFlex值改成属性绑定，让它关联到组件类里定义的变量：

<div fxLayout="row" style="height: 300px; gap: 1rem;">
  <div [fxFlex]="col1Flex" style="background-color: green; padding: 1rem;">
    <button mat-raised-button (click)="swapViewableArea()">Click to enlarge view</button>
    <p>Column 1 (Current Flex: {{col1Flex}})</p>
  </div>
  <div [fxFlex]="col2Flex" style="background-color: blue; padding: 1rem; color: white;">
    <p>Column 2 (Current Flex: {{col2Flex}})</p>
  </div>
</div>

这里用[fxFlex]（属性绑定语法）替代了字符串插值，这样组件变量更新时，DOM会自动同步变化。

2. 组件类中定义变量和点击事件逻辑

在你的组件TypeScript文件里，初始化两列的flex值，然后写按钮点击的处理方法——不管是交换两列的宽度，还是固定修改某一列的flex值，都可以轻松实现：

import { Component } from '@angular/core';

@Component({
  selector: 'app-flex-demo',
  templateUrl: './flex-demo.component.html',
  styleUrls: ['./flex-demo.component.css']
})
export class FlexDemoComponent {
  // 初始的flex分配比例，支持百分比、数字（flex-grow比例）、像素值等格式
  col1Flex = '30%';
  col2Flex = '70%';

  swapViewableArea() {
    // 方案1：交换两列的flex值
    const tempFlex = this.col1Flex;
    this.col1Flex = this.col2Flex;
    this.col2Flex = tempFlex;

    // 方案2：固定修改为特定值（比如点击后第一列占80%，第二列占20%）
    // this.col1Flex = '80%';
    // this.col2Flex = '20%';
  }
}

额外说明 #

• fxFlex支持多种格式：你可以用百分比（'30%'）、数字（比如3，代表flex-grow的权重比例）、像素值（'250px'），甚至是Flex Layout的特殊值（比如'auto'、'none'）
• 如果你的场景需要结合响应式断点（比如原来的fxFlex.md="40"），也可以用同样的方式动态绑定断点属性，比如[fxFlex.md]="col1MdFlex"，然后在点击事件里修改col1MdFlex的值即可——不过你提到是静态屏幕尺寸，所以当前断点已经生效，直接修改对应绑定的变量就足够了

内容的提问来源于stack exchange，提问作者nsk