将布局关注分为自己的组成部分:
@if
然后将contement项目
进入布局组件:
import { Component, signal } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
@Component({
selector: 'app-responsive-layout',
imports: [MatTabsModule],
template: `
@if (isMobile()) {
<mat-tab-group>
<mat-tab label="Tab 1">
<ng-content select="[data-section-1]"></ng-content>
</mat-tab>
<mat-tab label="Tab 2">
<ng-content select="[data-section-2]"></ng-content>
</mat-tab>
<mat-tab label="Tab 3">
<ng-content select="[data-section-3]"></ng-content>
</mat-tab>
</mat-tab-group>
} @else {
<div class="columns-collection">
<div class="column">
<ng-content select="[data-section-1]"></ng-content>
</div>
<div class="column">
<ng-content select="[data-section-2]"></ng-content>
</div>
<div class="column">
<ng-content select="[data-section-3]"></ng-content>
</div>
</div>
}
`,
styles: `
.column-collection {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.column {
display: flex;
flex-direction: column;
}
`,
})
export class ResponsiveLayoutComponent {
// TODO: update when on a mobile device
protected readonly isMobile = signal(false);
}
选择哪个组件进入哪个列/选项卡,但是您可以使用任何有效的CSS选择器(包括组件的