Tengo un componente de aplicación que tiene el siguiente html

 <app-header></app-header> <div class="main-container"> <router-outlet></router-outlet> </div> <app-footer></app-footer>

con css

 :host { display: flex; flex-direction: column; height: 100%; } .main-container { display: flex; flex-grow: 1; overflow: auto; }

y el componente en la salida del enrutador se ve así:

 <div id="home"> </div> <div id="about"> </div> <div id="contact"> </div>

Estoy tratando de agregar scrollToAnchor, pero no funciona. Funciona si elimino el desbordamiento: automático del contenedor principal, pero luego se puede desplazar toda la página, y el encabezado y el pie de página no son estáticos. ¿Hay alguna forma de habilitar scrollToAnchor con diseño flexible y solo desplazar la parte central de la aplicación? Prefiero flex en lugar de posición: fijo.

componente principal.ts:

 constructor( router: Router, viewportScroller: ViewportScroller ) { router.events.pipe( filter(e => e instanceof Scroll) ).subscribe(e => { e = e as Scroll if (e.anchor) { // anchor navigation viewportScroller.scrollToAnchor(e.anchor); } }); }

html que activa scrollToAnchor

 <a mat-button routerLink="/" fragment="home"></a> <a mat-button routerLink="/" fragment="about"></a> <a mat-button routerLink="/" fragment="contact"></a>