如何将默认属性应用于角度组件

Question

我正在尝试将一些字段格式化为整齐的行和列，并且因为我必须将一些其他组件与非常特定的格式相匹配，所以工作的 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">
      <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>

要输入或复制粘贴的内容很多，因此我想将其中一些 fxLayout div 抽象为角度组件，使其看起来像这样：

<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

组件：

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>
  <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>

不过，我不想为每个嵌套组件包含这些

fxFlex

属性。当我尝试创建

my-column

组件时，默认情况下无法将

fxFlex

字段应用到该组件。

我尝试了以下方法，但没有成功：

column.component.html

：

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

和

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

有没有办法自动将这些

fxFlex

属性应用到

my-column

组件？

Answer 1

您可以尝试使用角度指令并向新组件添加指令

my-row

，它将看到这个新组件并获取其所有子组件并分配您想要的属性：

import {Directive, ElementRef} from '@angular/core';
@Directive({
  standalone: true,
  selector: '[myRowDirective]',
})
export class MyRowtDirective {
  constructor(private el: ElementRef) {
    const row = this.el.nativeElement;
    const components = select all children of row
    for component in components{
      component.setAttribute("fxFlex", "45")
      ...
    }
  }
}

我制作了一个简化的代码，研究了一些关于指令的信息，但这是一个可以提供帮助的基础。