Angular 组件标签不占用全宽的行为

Question

为了简单起见，我有 2 个组件：

<app-transactions-page>

和

<app-overview-page>

。从他们的名字来看，两者都应该占据页面的整个宽度。

<router-outlet>

通向其中一页，它们的宽度有很大差异。

概览页面占据页面的 100% 宽度，这符合预期和期望。交易页面不占据整个宽度，而是我必须手动执行

<app-transactions-page class="w-100">

，其中

w-100

只是

width: 100%

。以下是我的代码：

概述组件 HTML：

<div class="flex my-400 mx-500" [ngClass]="{'mx-200 my-300': isMobile(), 'tablet': isTablet(), 'desktop': isDesktop()}">
    <!-- children... -->
</div>

组件CSS概述：

.flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
}

交易组件 HTML：

<div class="container mx-200">
  <!-- children... -->
</div>

交易组件CSS：

.container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    width: 100%; /* Trying to force it to take the full width */
}

现在在应用程序组件（两者的容器组件）中，它看起来像这样：

  <div class="position-relative app-container">
    
    <div class="position-relative" [ngClass]="{'layout-desktop': isDesktop(), 'brightness': !modalOn}">
      <router-outlet></router-outlet>
      <app-navigation></app-navigation>
    </div>


</div>

.app-container {
    width: 100%;
    height: 100%;
}

.brightness {
    background: rgba(0, 0, 0, 0.50);
    filter: brightness(-50%);
}

.brightness2 {
    filter: brightness(100%);
}
.layout-desktop {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    
}

问题是我怎样才能使

app-transactions-page

占据屏幕的整个宽度，而无需手动设置

w-100

，就像我们在

app-overview

中所做的那样？

这是否与

gap: (fixed number) px

和固定数字宽度有关？但我的大部分宽度都是

width: 100%

。

任何解释将不胜感激。

Answer 1

为什么不将其设置为

display: block

，它将始终采用全宽度。

:host {
    display: block;
}