Angular中router-outlet绑定子组件@Output事件类型不匹配如何解决？

你遇到的编译错误本质就是 router-outlet 不支持直接绑定路由子组件抛出的@Output事件：
router-outlet是Angular路由提供的占位组件，路由加载的子组件会作为它的同级DOM节点插入，不存在父子组件的嵌套关联。你在router-outlet上绑定的newItemEvent事件不会被Angular关联到路由子组件的@Output定义，反而会被识别为未知的原生DOM事件，默认传递的$event是原生Event类型，和你父组件changeLoadText方法要求的string参数类型不匹配，因此抛出TS2345错误。

有两种常用的稳定方案可选：

方案1：通过共享服务传递（更推荐，适配性更强） #

这个方案不依赖组件的嵌套关系，不管是路由父子还是跨模块组件都可以使用，是Angular中跨组件通信的通用解法。

1. 新建加载状态共享服务

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

@Injectable({
  providedIn: 'root' // 全局单例，也可注册到对应模块的providers数组中
})
export class LoadingService {
  // 用BehaviorSubject存储加载文案，支持获取当前值和订阅变更
  private readonly loadingTextSubject = new BehaviorSubject<string>('加载中');
  public loadingText$ = this.loadingTextSubject.asObservable();

  // 对外暴露更新文案的方法
  setLoadingText(text: string): void {
    this.loadingTextSubject.next(text);
  }
}

2. 子组件中调用服务方法更新文案，不需要保留原来的@Output定义

import { LoadingService } from './loading.service';

// 注入服务
constructor(private loadingService: LoadingService) {}

// 原调用changeLoadText的位置替换为服务调用
updateText() {
  this.loadingService.setLoadingText('自定义加载文案');
}

3. 父组件中订阅服务的文案变更流

import { LoadingService } from './loading.service';
import { Subscription } from 'rxjs';

loadingText = '';
private loadingTextSub?: Subscription;

constructor(private loadingService: LoadingService) {}

ngOnInit(): void {
  // 订阅加载文案变更
  this.loadingTextSub = this.loadingService.loadingText$.subscribe(text => {
    this.loadingText = text;
  });
}

ngOnDestroy(): void {
  // 组件销毁时取消订阅，避免内存泄漏
  this.loadingTextSub?.unsubscribe();
}

方案2：通过router-outlet的activate事件手动订阅子组件事件 #

如果不想额外引入服务，可以利用router-outlet的activate事件获取到当前加载的子组件实例，手动绑定@Output事件。

1. 修改父组件模板，绑定activate事件

<div class='placeholder'>
  <router-outlet (activate)="onRouterActivate($event)"></router-outlet>
</div>

2. 父组件TS中处理子组件实例绑定

import { Subscription } from 'rxjs';

private childEventSub?: Subscription;

// 路由子组件加载完成时触发，参数为子组件实例
onRouterActivate(childComponent: any): void {
  // 先判断子组件是否存在对应的@Output事件，避免非目标子组件报错
  if (childComponent?.newItemEvent) {
    this.childEventSub = childComponent.newItemEvent.subscribe((text: string) => {
      this.changeLoadText(text);
    });
  }
}

ngOnDestroy(): void {
  // 组件销毁时取消订阅
  this.childEventSub?.unsubscribe();
}

子组件的@Output定义不需要做任何修改，保留原有逻辑即可。

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