html - Angular flex 布局不适用于子组件

Question

我正在尝试以如下方式创建 mat-cards 的 flex 布局网格组件，如下所示：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <app-card
    fxFlex.sm="0 1 calc(50%-10px)"
    fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let cardModel of apodCards$ | async"
    [cardModel]="cardModel"
  >
  </app-card>
</div>

最终看起来像这样：

如果我像这样使用我的 app-card 组件的 html 模板：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <mat-card
    fxFlex.sm="0 1 calc(50%-10px)"
    fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let cardModel of apodCards$ | async"
    class="example-card"
  >
    <mat-card-header>
      <mat-card-title>{{ cardModel.title }}</mat-card-title>

      <mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
    <ng-content></ng-content>

    <mat-card-content>
      <p [innerHTML]="cardModel.description"></p>
    </mat-card-content>

    <mat-card-actions>
      <app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
    </mat-card-actions>
  </mat-card>
</div>

它最终看起来像这样：

如何让我的 app-card 组件看起来像第二张图片？

我尝试像这样重构 app-card 组件：

<mat-card
  fxFlex.sm="0 1 calc(50%-10px)"
  fxFlex.md="0 1 calc(33%-10px)"
  fxFlex.gt-md="0 1 calc(25%-10px)"
  class="example-card"
>
  <mat-card-header>
    <mat-card-title>{{ cardModel.title }}</mat-card-title>

    <mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
  <ng-content></ng-content>

  <mat-card-content>
    <p [innerHTML]="cardModel.description"></p>
  </mat-card-content>

  <mat-card-actions>
    <app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
  </mat-card-actions>
</mat-card>

然后像这样在网格组件中使用：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <app-card
    *ngFor="let cardModel of apodCards$ | async"
    [cardModel]="cardModel"
  >
  </app-card>
</div>

没有运气。

编辑：见 Stackblitz

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <!-- This doesn't work, maybe I need to apply flex to the custom CardComponent somehow? -->
  <app-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let card of cards;" [card]="card">
  </app-card>

  <!-- This works -->
  <!-- <mat-card *ngFor="let card of cards;" fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>{{card.name}}</mat-card-title>
    <img mat-card-image src="{{card.picture.uri}}" class="image">
    <mat-card-content>{{card.description}}</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card> -->

</div>

标签： htmlcssangularangular-material2angular-flex-layout

Answer 1

- 这是一个包含组件的解决方案： 添加fxFlex到您的卡片

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <app-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let card of cards;" [card]="card">
    <mat-card fxFlex>...</mat-card>
    <mat-card fxFlex>...</mat-card>
    <mat-card fxFlex>...</mat-card>...
  </app-card>
</div>

- 这是一个没有组件的解决方案：

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <mat-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>Card 1</mat-card-title>
    <img mat-card-image src="https://kakiseni.org/wp-content/uploads/2018/03/250X250.png" class="image">
    <mat-card-content>Primary card content. Intended for blocks of text</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card>

  <mat-card>...</mat-card>
</div>

Stackblitz 链接