fix(material-angular-io): sidenav links not updating (#30564)

Fixes that the links in the docs sidenav weren't updating on navigation and avoids passing route parameters around.

Author: crisbeto

material.angular.io/src/app/pages/component-sidenav/component-nav.html

@@ -1,12 +1,13 @@
 <div class="docs-component-viewer-nav">
   @let items = (this.items | async) || [];
+  @let params = this._params | async;
 
   @if (items.length > 0) {
     <div class="docs-component-viewer-nav-content">
       <mat-nav-list>
         @for (component of items; track component) {
           <a mat-list-item #link="routerLinkActive"
-              [routerLink]="'/' + params()?.section + '/' + component.id"
+              [routerLink]="'/' + params?.section + '/' + component.id"
               [activated]="link.isActive"
               routerLinkActive="docs-component-viewer-sidenav-item-selected"
               [attr.aria-current]="link.isActive ? 'page': 'false'">

material.angular.io/src/app/pages/component-sidenav/component-sidenav.html

@@ -6,7 +6,7 @@
                 [mode]="(isScreenSmall | async) ? 'over' : 'side'"
                 [fixedInViewport]="(isScreenSmall | async)"
                 [fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
-      <app-component-nav [params]="params | async"></app-component-nav>
+      <app-component-nav/>
     </mat-sidenav>
   }
   <div class="docs-component-sidenav-content">
@@ -15,7 +15,7 @@
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->
         @if ((isScreenSmall | async) === false) {
-          <app-component-nav [params]="params | async"/>
+          <app-component-nav/>
         }
         <router-outlet></router-outlet>
       </main>

material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

@@ -5,23 +5,14 @@ import {
   ViewEncapsulation,
   forwardRef,
   inject,
-  input,
   viewChild,
 } from '@angular/core';
-import {toObservable} from '@angular/core/rxjs-interop';
 import {BreakpointObserver} from '@angular/cdk/layout';
 import {AsyncPipe} from '@angular/common';
 import {MatListItem, MatNavList} from '@angular/material/list';
 import {MatSidenav, MatSidenavContainer} from '@angular/material/sidenav';
-import {
-  ActivatedRoute,
-  Params,
-  Routes,
-  RouterOutlet,
-  RouterLinkActive,
-  RouterLink,
-} from '@angular/router';
-import {combineLatest, Observable, Subscription} from 'rxjs';
+import {ActivatedRoute, Routes, RouterOutlet, RouterLinkActive, RouterLink} from '@angular/router';
+import {Observable, of, Subscription} from 'rxjs';
 import {map, switchMap} from 'rxjs/operators';
 
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
@@ -66,11 +57,9 @@ const SMALL_WIDTH_BREAKPOINT = 959;
 })
 export class ComponentSidenav implements OnInit, OnDestroy {
   docItems = inject(DocumentationItems);
-  private _route = inject(ActivatedRoute);
   private _navigationFocusService = inject(NavigationFocusService);
 
   readonly sidenav = viewChild(MatSidenav);
-  params: Observable<Params>;
   isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
   private _subscriptions = new Subscription();
@@ -84,11 +73,6 @@ export class ComponentSidenav implements OnInit, OnDestroy {
     this.isScreenSmall = breakpoints
       .observe(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)
       .pipe(map(breakpoint => breakpoint.matches));
-
-    this.params = combineLatest(
-      this._route.pathFromRoot.map(route => route.params),
-      Object.assign,
-    );
   }
 
   ngOnInit() {
@@ -120,12 +104,11 @@ export class ComponentSidenav implements OnInit, OnDestroy {
 })
 export class ComponentNav {
   private _docItems = inject(DocumentationItems);
-  readonly params = input<Params | null>();
+  private _route = inject(ActivatedRoute);
+  protected _params = this._route.params;
 
-  items = toObservable(this.params).pipe(
-    switchMap(params =>
-      params?.section ? this._docItems.getItems(params.section) : Promise.resolve(null),
-    ),
+  items = this._params.pipe(
+    switchMap(params => (params?.section ? this._docItems.getItems(params.section) : of([]))),
   );
 }