Angular 如何根据加载的路由组件动态调整容器高度

以下3种方案适配不同的项目场景，可根据实际需求选择：

方案1：路由传参+父组件动态绑定（最推荐，无兼容性问题、易维护） #

步骤1：修改路由配置 #

在路由表中为C组件对应的子路由新增自定义data参数：

const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      { path: 'a', component: AComponent }, // 无需调整高度的路由无需额外配置
      { path: 'b', component: BComponent },
      // 给C组件路由加自定义高度参数
      { path: 'c', component: CComponent, data: { panelHeight: '80vh' } } 
    ]
  }
]

步骤2：修改Admin组件TS逻辑（admin.component.ts） #

监听路由变化，获取当前子路由的自定义高度配置：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.scss']
})
export class AdminComponent implements OnInit {
  // 默认高度为60vh
  panelHeight = '60vh';

  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听路由导航完成事件
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 读取当前激活子路由的data参数，没有配置则用默认值
        const activeChildRoute = this.route.firstChild;
        this.panelHeight = activeChildRoute?.snapshot.data['panelHeight'] || '60vh';
      }
    })
  }
}

步骤3：修改Admin组件模板（admin.component.html） #

把高度动态绑定到容器的style属性上：

<div class="admin-right-panel" [style.height]="panelHeight">              
  <div class="grid-style">
    <router-outlet></router-outlet>
  </div>
</div>

原有SCSS里的.admin-right-panel固定高度可以删除，也可以保留作为降级兜底。

方案2：CSS :has选择器实现（代码量最小，需注意浏览器兼容性） #

如果项目不需要兼容低版本浏览器（Chrome 105+、Firefox 121+、Safari 15.4+均支持该特性），直接修改admin.component.scss即可，无需改动TS逻辑：

.admin-right-panel {
  height: 60vh;
  // 注意把app-c替换为你C组件的实际选择器名称
  &:has(app-c) {
    height: 80vh;
  }
}

方案3：服务通信实现（适合后续有大量动态调整容器高度的场景） #

步骤1：新建公共管理服务 admin-panel.service.ts #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AdminPanelService {
  private heightSubject = new BehaviorSubject<string>('60vh');
  public height$ = this.heightSubject.asObservable();

  updatePanelHeight(height: string) {
    this.heightSubject.next(height);
  }
}

步骤2：Admin组件订阅高度变化 #

在admin.component.ts中注入服务，订阅高度值更新：

constructor(private adminPanelService: AdminPanelService) {}

ngOnInit() {
  this.adminPanelService.height$.subscribe(height => {
    this.panelHeight = height;
  })
}

模板绑定逻辑和方案1一致，绑定[style.height]="panelHeight"即可。

步骤3：C组件内触发高度修改 #

在c.component.ts的生命周期钩子中更新高度：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AdminPanelService } from './admin-panel.service';

@Component({ selector: 'app-c', ... })
export class CComponent implements OnInit, OnDestroy {
  constructor(private adminPanelService: AdminPanelService) {}

  ngOnInit() {
    // 组件加载时修改为80vh
    this.adminPanelService.updatePanelHeight('80vh');
  }

  ngOnDestroy() {
    // 组件销毁时恢复默认高度
    this.adminPanelService.updatePanelHeight('60vh');
  }
}

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