Angular开发：如何将Angular组件嵌入navbar导航栏

以下分3种常用场景给出可直接落地的实现方式，传值逻辑和普通Angular组件传值规则完全一致，不需要做额外适配。

方案1：内容投影（最推荐，固定布局场景用） #

如果你的Navbar是全局公共组件，嵌入位置固定，直接用Angular原生内容投影实现，开发成本最低。

• 第一步：改造Navbar组件，在需要嵌入自定义内容的位置预留投影插槽
  编辑navbar.component.html：

  <nav class="navbar">
    <div class="nav-left">站点Logo</div>
    <div class="nav-middle">
      <a routerLink="/home">首页</a>
      <a routerLink="/list">列表页</a>
    </div>
    <!-- 右侧预留嵌入位，支持自定义组件传入 -->
    <div class="nav-right">
      <ng-content select="[navRightSlot]"></ng-content>
    </div>
  </nav>
  

• 第二步：在使用Navbar的父布局（一般是根布局组件app.component.html）中，直接把你封装好的组件放到插槽位置，正常用@Input传值即可：

  <app-navbar>
    <div navRightSlot>
      <!-- 你自己封装的组件，正常绑定输入参数、监听输出事件就行 -->
      <app-user-avatar [userInfo]="currentLoginUser" (logout)="handleLogout()"></app-user-avatar>
    </div>
  </app-navbar>
  <router-outlet></router-outlet>
  

方案2：动态组件加载（按需切换嵌入组件场景用） #

如果需要根据路由、用户权限动态切换Navbar上嵌入的组件（比如不同业务页面要在Navbar放不同的操作按钮），用动态组件加载实现。

• 第一步：在Navbar模板中标记动态组件挂载点，编辑navbar.component.html：

  <nav class="navbar">
    <!-- 原有导航结构省略 -->
    <div class="nav-right">
      <ng-template #dynamicSlot></ng-template>
    </div>
  </nav>
  

• 第二步：在Navbar组件逻辑中实现动态加载能力，编辑navbar.component.ts：

  import { Component, ViewChild, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';
  
  @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html' })
  export class NavbarComponent implements OnDestroy {
    @ViewChild('dynamicSlot', { read: ViewContainerRef, static: true }) private slot!: ViewContainerRef;
    private currentComp?: ComponentRef<any>;
  
    // 对外暴露加载方法，传入组件类和需要传递的参数即可
    loadComp(comp: new (...args: any[]) => any, inputs?: Record<string, any>) {
      // 清空之前加载的组件
      this.slot.clear();
      this.currentComp?.destroy();
      // 挂载新组件
      const compRef = this.slot.createComponent(comp);
      // 传入输入参数
      if (inputs) Object.entries(inputs).forEach(([k, v]) => compRef.instance[k] = v);
      compRef.changeDetectorRef.detectChanges();
      this.currentComp = compRef;
    }
  
    ngOnDestroy() {
      this.currentComp?.destroy();
    }
  }
  

• 第三步：业务页面需要嵌入组件时，直接获取Navbar实例调用loadComp方法即可，参数直接传入组件，不需要额外处理传值。如果跨层级调用不方便，写个全局共享Service中转调用就行。

方案3：CDK Portals（深层嵌套组件跨层级渲染场景用） #

如果你的业务组件嵌套层级很深，不想层层传递组件实例，可以用Angular CDK的Portal能力，直接把任意位置的组件/模板渲染到Navbar的预留位置。

• 第一步：安装CDK依赖（项目已安装可跳过）：npm i @angular/cdk
• 第二步：在Navbar的嵌入位置添加Portal出口，同时写个全局服务管理要渲染的内容，业务组件只需要调用服务传入要渲染的Portal，就能直接把内容投射到Navbar上，组件自身的上下文、数据绑定完全正常生效，不需要额外处理传值。

效果参考 #

内容的提问来源于stack exchange，提问作者A-C-3