如何在 angular 中对 <router-outlet> 执行 overflow-y？

Question

我是 bootstrap 和 angular 的新手，所以我不知道哪里出错了...

现状：

首先，我使用 router-outlet 来显示 login-page 或 "workspace"。

<app-header ></app-header>
<router-outlet></router-outlet>

在 "workspace" 内：

<div class="d-flex flex-row" >
   <app-side-navigation> </app-side-navigation>
   <div #needOverflow class=" m-0 overflow-auto" >
      <router-outlet></router-outlet>
   </div>
</div>

第二个 router-outlet 包含需要 overflow-y 的组件：auto

overflow-auto 的 boodstrap 不起作用！

How the application looks

如果我说我的 div#needsOverflow 的高度等于 600px，那么我会看到一个没有到达屏幕末尾的溢出。如何让溢出遍及整个屏幕？我尝试了 height = 100vh 但由于我的 header.

这太大了

所以我希望我的第二个 router-outlet 只有当我的路由器插座的内容离开屏幕时才有 overflow-y，也就是说，我的side-nav&header留在原地也可以

我也试过 mat-sidenav，但这给了我很多问题，因为我认为 header

Answer 1

太棒了，我通过添加指令修复了整个故事！ :

应用组件html：

<app-header viewportheight></app-header>
<div>
  <router-outlet></router-outlet>
</div>

viewportheight.directive:

@Directive({
 selector: '[viewportheight]'
})
export class ViewportheightDirective implements AfterViewChecked {

 constructor(private el: ElementRef ,private viewportHeight: ViewportheightService) { }

 ngAfterViewChecked(): void {
   this.sendSizeToService();
 }


 @HostListener('window:resize')
 onResize(){
   this.sendSizeToService();
 }

 sendSizeToService(){
   this.viewportHeight.headerheight.next(this.el.nativeElement.offsetHeight)
 }
}

workspace.html:

<div class="d-flex flex-row  " >
  <app-side-navigation class="align-self-start"> </app-side-navigation>

  <div class="overflow-auto p-3 w-100"  [ngStyle]="{'height': 'calc(100vh - ' + height + 'px)'}">
        <router-outlet></router-outlet>
  </div>

</div>

height 在我的 viewportheightService 中订阅了一个 BehavourSubject。

如何在 angular 中对 <router-outlet> 执行 overflow-y？

How to do overflow-y on an <router-outlet> in angular?

css

overflow

bootstrap-4

angular