如何在一个上做溢出-y<router-outlet> 在 angular 中？</router-outlet>

Question

Im new to bootstrap and angular, so I don't know where i went wrong...

Situation as it is:

First I use an router-outlet to display a login-page or the "workspace".

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

inside the "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>

the second router-outlet contains a component that needs the overflow-y: auto

overflow-auto of boodstrap doesnt work!

How the application looks

If I say that my height of the div#needsOverflow equals to 600px, then I see an overflow that doesnt go to the end of my screen. How do I make the overflow go over my whole screen? I tried height = 100vh but this is to big due my header.

So I want that my 2nd router-outlet has an overflow-y only when the content of my router outlet leaves the screen, In other words, its also ok that my side-nav & header stay in place

I also tried mat-sidenav, but that gives me alot of probs because of the header I think

Answer 1

Soooo I fixed this whole story by adding a directive: :

app-component 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>

With height being subscribed to a BehavourSubject in my viewportheightService.