Angular中如何让router-outlet生成的组件铺满宽高

我用了下面的默认布局结构：

<div class="min-h-screen flex flex-col">
  <app-header></app-header>
  <div class="flex-grow">
    <router-outlet></router-outlet>
  </div>
  <app-footer></app-footer>
</div>

但访问app-home这类路由组件时，组件自身的宽高都是0。虽然用:host选择器能解决，但每个新建组件都得加这个样式，太麻烦了——而且那个带flex-grow类的父级div明明已经有满宽高属性了。

相关截图：

不用给每个组件单独写样式，直接全局统一处理就行，给你两个简单方案：

方案1：用CSS选择器统一设置路由组件样式 #

在这个布局所在的组件样式文件里加这段代码：

.flex-grow > router-outlet + * {
  width: 100%;
  height: 100%;
}

原理：router-outlet + * 会精准选中路由渲染出来的第一个组件（也就是router-outlet紧挨着的子组件），结合父容器的flex-grow，就能让组件自动占满整个父容器的宽高。

方案2：给路由组件加个全屏容器 #

修改布局结构，在router-outlet外面套一层带全屏样式的容器：

<div class="min-h-screen flex flex-col">
  <app-header></app-header>
  <div class="flex-grow">
    <div class="w-full h-full">
      <router-outlet></router-outlet>
    </div>
  </div>
  <app-footer></app-footer>
</div>

这样路由加载的组件会自动继承这个容器的宽高，不用再给组件单独设置样式。

问题原因说明 #

Angular组件默认是display: block但没有默认宽高，就算父容器有flex-grow属性，子组件也不会自动撑满父容器。上面的两种方法都是一次性解决所有路由组件的问题，避免重复劳动。

内容的提问来源于stack exchange，提问作者Oleksandr Havrushkevych