能否通过Portal为全局侧边栏动态添加页面专属组件？

当然可以！Angular的Portal（来自@angular/cdk/portal）正是为这类场景设计的——它能让你把组件动态挂载到页面上的任意DOM位置，完美适配你这种全局侧边栏根据当前页面切换内容的需求。下面我给你一步步拆解实现方案：

第一步：准备Portal容器 #

首先修改你的全局侧边栏模板，把{{ComponentGoesHERE}}的位置替换成Angular CDK的cdkPortalOutlet，这是Portal组件的挂载点，同时用*ngIf控制该区域的显示/隐藏：

<md-sidenav-container fullscreen>
  <md-sidenav #sidenav mode="push" class="app-sidenav">
    <md-toolbar color="primary">
      <span style="flex: 1 1 auto"></span>
      <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
        <md-icon aria-label="Menu" class="material-icons">close</md-icon>
      </button>
    </md-toolbar>
    <!-- 替换为Portal容器，无对应组件时自动隐藏 -->
    <div *ngIf="activePortal">
      <ng-template [cdkPortalOutlet]="activePortal"></ng-template>
    </div>
    <h2>Navigation</h2>
    <!-- 原导航列表代码不变 -->
    <md-nav-list>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp1']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>account_balance</md-icon>
        <span class="title" md-line>comp1</span>
        <span md-line class="secondary">test</span>
      </a>
      <a md-list-item class="sidenav-link" [routerLink]="['/comp2']" (click)="sidenav.toggle()">
        <md-icon md-list-icon>android</md-icon>
        <span class="title" md-line>comp2</span>
        <span md-line class="secondary">test</span>
      </a>
    </md-nav-list>
  </md-sidenav>
  <!-- 原工具栏和router-outlet代码不变 -->
  <md-toolbar id="appToolbar" color="primary">
    <button md-icon-button (click)="sidenav.toggle()" class="md-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
      <md-icon aria-label="Menu" class="material-icons">menu</md-icon>
    </button>
    <h1>
      <a class="title-link">My Navigation Bar</a>
    </h1>
    <span style="flex: 1 1 auto"></span>
    <button id="button-logout" md-button>Log Out</button>
  </md-toolbar>
  <router-outlet></router-outlet>
</md-sidenav-container>

别忘了在你的模块中导入CdkPortalModule：

import { CdkPortalModule } from '@angular/cdk/portal';

@NgModule({
  imports: [
    // 其他模块...
    CdkPortalModule
  ]
})
export class AppModule { }

第二步：路由与侧边栏组件的映射逻辑 #

先创建各个页面对应的侧边栏组件，比如ReportsSidebarComponent（报告页的侧边栏内容）、SearchSidebarComponent（交易页的搜索组件）。然后在App组件中监听路由变化，根据当前路由动态切换Portal：

import { Component, OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subject, takeUntil } from 'rxjs';
import { ComponentPortal } from '@angular/cdk/portal';
// 导入你的侧边栏组件
import { ReportsSidebarComponent } from './reports/reports-sidebar.component';
import { SearchSidebarComponent } from './transactions/search-sidebar.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
  activePortal: ComponentPortal<any> | null = null;
  private destroy$ = new Subject<void>();

  // 路由路径 -> 对应侧边栏组件的映射表
  private sidebarComponentMap: Record<string, any> = {
    '/reports': ReportsSidebarComponent,
    '/transactions': SearchSidebarComponent
    // settings页面无对应组件，不添加映射即可
  };

  constructor(private router: Router, private viewContainerRef: ViewContainerRef) {}

  ngOnInit() {
    // 监听路由跳转完成事件，更新侧边栏Portal
    this.router.events.pipe(
      takeUntil(this.destroy$)
    ).subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.updateSidebarPortal(event.urlAfterRedirects);
      }
    });
  }

  private updateSidebarPortal(currentUrl: string) {
    // 先销毁之前的Portal组件，避免内存泄漏
    if (this.activePortal) {
      this.activePortal = null;
    }

    // 根据当前路由匹配对应的组件
    const targetComponent = this.sidebarComponentMap[currentUrl];
    if (targetComponent) {
      // 创建ComponentPortal实例，挂载到侧边栏容器
      this.activePortal = new ComponentPortal(targetComponent, this.viewContainerRef);
    }
    // 无匹配组件时，activePortal为null，侧边栏区域会被*ngIf隐藏
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

第三步：优化与扩展技巧 #

• 给Portal组件传递数据：如果需要向动态加载的侧边栏组件传递页面参数，可以用PortalInjector注入数据：

  import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
  import { Injector } from '@angular/core';
  
  // 定义要传递的参数
  const injectionTokens = new WeakMap();
  injectionTokens.set('pageParams', { reportId: 1001 });
  const portalInjector = new PortalInjector(this.injector, injectionTokens);
  
  this.activePortal = new ComponentPortal(targetComponent, this.viewContainerRef, portalInjector);
  

  然后在侧边栏组件中通过@Inject('pageParams')获取参数。

• 懒加载侧边栏组件：如果侧边栏组件体积较大，可以用动态导入实现懒加载，优化首屏性能：

  private sidebarComponentMap: Record<string, Promise<any>> = {
    '/reports': import('./reports/reports-sidebar.component').then(m => m.ReportsSidebarComponent),
    '/transactions': import('./transactions/search-sidebar.component').then(m => m.SearchSidebarComponent)
  };
  

  然后在updateSidebarPortal中异步加载组件：

  private async updateSidebarPortal(currentUrl: string) {
    this.activePortal = null;
    const componentLoader = this.sidebarComponentMap[currentUrl];
    if (componentLoader) {
      const targetComponent = await componentLoader;
      this.activePortal = new ComponentPortal(targetComponent, this.viewContainerRef);
    }
  }
  

这样就能完美实现你想要的效果：进入不同页面时自动加载对应侧边栏组件，无对应组件时隐藏该区域，完全按需加载~

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