如何封装Angular工具栏组件避免单体化，并实现从懒加载页面向根级工具栏注入特定内容？

针对你的问题，我整理了几个Angular原生的优雅方案，完全不需要CSS hack，也能彻底摆脱臃肿的switch-case逻辑：

方案1：使用Angular CDK Portal（首推） #

Angular CDK的Portal模块专门用于处理跨组件的内容投影，完美适配你的场景——让懒加载页面组件把特定内容传递给根组件的Toolbar。

实现步骤： #

1. 先安装CDK（如果还没安装）：

npm install @angular/cdk

2. 创建共享服务，用于传递Portal内容：

import { Injectable } from '@angular/core';
import { TemplatePortal } from '@angular/cdk/portal';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ToolbarPortalService {
  private readonly toolbarContentSubject = new BehaviorSubject<TemplatePortal<any> | null>(null);
  readonly content$ = this.toolbarContentSubject.asObservable();

  setToolbarContent(portal: TemplatePortal<any> | null) {
    this.toolbarContentSubject.next(portal);
  }
}

3. 修改<my-toolbar>组件，用CdkPortalOutlet渲染动态内容：

<!-- my-toolbar.component.html -->
<div class="toolbar">
  <!-- 工具栏通用内容 -->
  <button class="home-btn">首页</button>
  
  <!-- 动态注入的页面特定内容 -->
  <ng-template [cdkPortalOutlet]="currentContent"></ng-template>
</div>

// my-toolbar.component.ts
import { Component, OnInit } from '@angular/core';
import { ToolbarPortalService } from './toolbar-portal.service';

@Component({
  selector: 'my-toolbar',
  templateUrl: './my-toolbar.component.html'
})
export class MyToolbarComponent implements OnInit {
  currentContent = this.toolbarPortalService.getToolbarContent();

  constructor(private toolbarPortalService: ToolbarPortalService) {}

  ngOnInit() {
    // 订阅内容变化，路由切换时自动更新
    this.toolbarPortalService.content$.subscribe(portal => {
      this.currentContent = portal;
    });
  }
}

4. 在懒加载页面组件中，标记要注入的内容并传递给服务：

<!-- lazy-page.component.html -->
<ng-template #toolbarContent>
  <!-- 页面专属工具栏内容，支持绑定组件内的属性/方法 -->
  <button class="page-btn" (click)="openAddModal()">新增用户</button>
  <span class="page-title">{{ pageTitle }}</span>
</ng-template>

<!-- 页面其他内容 -->
<div class="page-content">...</div>

// lazy-page.component.ts
import { Component, OnInit, OnDestroy, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { ToolbarPortalService } from '../toolbar-portal.service';
import { TemplatePortal } from '@angular/cdk/portal';

@Component({
  selector: 'app-lazy-page',
  templateUrl: './lazy-page.component.html'
})
export class LazyPageComponent implements OnInit, OnDestroy {
  @ViewChild('toolbarContent') toolbarContentRef!: TemplateRef<any>;
  pageTitle = '用户列表';
  private toolbarPortal: TemplatePortal<any> | null = null;

  constructor(
    private toolbarPortalService: ToolbarPortalService,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit() {
    // 创建Portal并传递给Toolbar
    this.toolbarPortal = new TemplatePortal(this.toolbarContentRef, this.viewContainerRef);
    this.toolbarPortalService.setToolbarContent(this.toolbarPortal);
  }

  ngOnDestroy() {
    // 组件销毁时清空内容，避免内存泄漏
    this.toolbarPortalService.setToolbarContent(null);
  }

  openAddModal() {
    // 页面组件的自定义逻辑
    console.log('打开新增用户弹窗');
  }
}

这个方案完全贴合Angular组件设计理念，既灵活又无hack，还能传递带交互逻辑的模板内容。

方案2：路由数据+结构化配置 #

如果只是需要传递简单的文本、图标或按钮配置，不需要复杂模板，可以用路由数据定义每个页面的Toolbar内容，Toolbar组件订阅路由变化自动更新。

实现步骤： #

1. 在路由配置中添加Toolbar自定义数据：

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UsersModule),
    data: {
      toolbar: {
        title: '用户列表',
        actions: [
          { icon: 'add', label: '新增用户', handler: 'openAddModal' }
        ]
      }
    }
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),
    data: {
      toolbar: {
        title: '系统设置',
        actions: []
      }
    }
  }
];

2. 创建服务处理路由数据解析：

import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

export interface ToolbarConfig {
  title?: string;
  actions?: Array<{ icon?: string; label?: string; handler: string }>;
}

@Injectable({ providedIn: 'root' })
export class ToolbarConfigService {
  private readonly configSubject = new BehaviorSubject<ToolbarConfig>({});
  readonly config$ = this.configSubject.asObservable();

  constructor(private router: Router) {
    // 订阅路由变化，更新Toolbar配置
    this.router.events.pipe(
      map(() => {
        let route = this.router.routerState.root;
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route.snapshot.data['toolbar'] || {};
      })
    ).subscribe(config => {
      this.configSubject.next(config);
    });
  }
}

3. 修改Toolbar组件渲染配置内容：

<!-- my-toolbar.component.html -->
<div class="toolbar">
  <button class="home-btn">首页</button>
  
  <span class="toolbar-title" *ngIf="config.title">{{ config.title }}</span>
  
  <div class="toolbar-actions">
    <button 
      *ngFor="let action of config.actions"
      class="action-btn"
      (click)="triggerAction(action.handler)"
    >
      <span *ngIf="action.icon" class="material-icons">{{ action.icon }}</span>
      {{ action.label }}
    </button>
  </div>
</div>

// my-toolbar.component.ts
import { Component } from '@angular/core';
import { ToolbarConfigService, ToolbarConfig } from './toolbar-config.service';
import { EventEmitterService } from './event-emitter.service'; // 可自定义事件服务传递交互

@Component({
  selector: 'my-toolbar',
  templateUrl: './my-toolbar.component.html'
})
export class MyToolbarComponent {
  config: ToolbarConfig = {};

  constructor(
    private toolbarConfigService: ToolbarConfigService,
    private eventEmitter: EventEmitterService
  ) {
    this.toolbarConfigService.config$.subscribe(config => {
      this.config = config;
    });
  }

  triggerAction(handlerName: string) {
    // 通过事件服务触发页面组件的方法
    this.eventEmitter.emit(handlerName);
  }
}

这个方案适合简单场景，配置成本低，但复杂交互不如方案1灵活。

总结来说，**方案1（CDK Portal）**是最适配你需求的选择，它既解决了跨层级内容注入的问题，又能保持代码的模块化和可维护性，彻底摆脱臃肿的switch逻辑。

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