如何为Angular组件自动添加默认fxFlex属性

背景与需求 #

我需要实现规整的行列布局，原本的代码需要重复编写大量fxLayout相关的div和fxFlex属性，示例代码如下：

<div fxLayout="column" style="margin-right: -30px">
  <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
    <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
      <some-component-1
        fxFlex="45"
        fxFlex.sm="90"
        fxFlex.xs="90"
      ></some-component-1>
      <some-component-2
        fxFlex="45"
        fxFlex.sm="90"
        fxFlex.xs="90"
      ></some-component-2>
    </div>
  </div>
</div>

为了简化代码，我希望将这些布局逻辑抽象为Angular组件，最终实现如下简洁的调用方式：

<my-row>
  <my-column>
    <some-component-1></some-component-1>
  </my-column>
  <my-column>
    <some-component-2></some-component-2>
  </my-column>
</my-row>

已完成的my-row组件 #

我已经成功实现了my-row组件，代码如下：

row.component.html

<div fxLayout="column" style="margin-right: -30px">
  <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
    <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
      <ng-content></ng-content>
    </div>
  </div>
</div>

目前my-row可以正常使用，但需要给每个嵌套组件手动添加fxFlex属性：

<my-row>
  <some-component-1
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs="90"
  ></some-component-1>
  <some-component-2
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs="90"
  ></some-component-2>
</my-row>

遇到的问题 #

我尝试创建my-column组件来自动注入fxFlex属性，但以下两种写法均无效：

无效写法1：用ng-container承载fxFlex

<ng-container
  fxFlex="45"
  fxFlex.sm="90"
  fxFlex.xs="90"
>
  <ng-content></ng-content>
</ng-container>

无效写法2：给ng-content加fxFlex

<ng-container>
  <ng-content 
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs="90"
  ></ng-content>
</ng-container>

解决方案 #

问题根源在于：ng-container是Angular的逻辑容器，不会被渲染到DOM中，因此作用在它上面的fxFlex指令无法生效；而ng-content只是内容投影的占位符，不是实际DOM元素，也不能直接绑定指令。

方案1：用div作为fxFlex的承载元素 #

修改column.component.html，用实际渲染的div来承载fxFlex属性：

<div
  fxFlex="45"
  fxFlex.sm="90"
  fxFlex.xs="90"
>
  <ng-content></ng-content>
</div>

这样div会被渲染到DOM中，fxFlex指令正常生效，同时包裹内部投影的内容。

方案2：在组件宿主元素上绑定fxFlex（推荐） #

通过Angular的@HostBinding或组件装饰器的host属性，直接在my-column组件的宿主元素上添加fxFlex属性，无需额外嵌套元素：

column.component.ts

import { Component, HostBinding } from '@angular/core';
import { FlexModule } from '@angular/flex-layout';

@Component({
  selector: 'my-column',
  standalone: true, // 若使用独立组件需添加
  imports: [FlexModule],
  template: '<ng-content></ng-content>'
})
export class ColumnComponent {
  @HostBinding('fxFlex') flex = '45';
  @HostBinding('fxFlex.sm') flexSm = '90';
  @HostBinding('fxFlex.xs') flexXs = '90';
}

或者使用组件装饰器的host属性替代@HostBinding：

@Component({
  // ...其他配置
  host: {
    '[fxFlex]': '"45"',
    '[fxFlex.sm]': '"90"',
    '[fxFlex.xs]': '"90"'
  }
})

这样使用<my-column>时，组件本身的DOM元素会自动带上响应式的fxFlex属性，完全符合预期的简化写法。

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