Angular 弹性布局不适用于子组件
Angular flex layout not applying to child component
我正在尝试在 angular 中创建垫卡的弹性布局网格组件,如下所示:
<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>
最终看起来像这样:
如果我使用应用卡片组件的 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 组件:
<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>
运气不好。
<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>
- 这是一个包含组件的解决方案:
添加 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>
我正在尝试在 angular 中创建垫卡的弹性布局网格组件,如下所示:
<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>
最终看起来像这样:
如果我使用应用卡片组件的 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 组件:
<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>
运气不好。
<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>
- 这是一个包含组件的解决方案:
添加 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>