Angular中如何将父组件按钮点击事件传递给路由加载的子组件？

这种跨路由嵌套组件的事件传递，最直接可靠的方式是用Angular共享服务，借助RxJS的Subject实现事件的发布与订阅，具体步骤如下：

1. 创建共享事件服务 #

新建一个全局共享服务（比如event.service.ts），用来承载Banner按钮的点击事件流：

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

@Injectable({
  providedIn: 'root' // 全局单例模式，确保所有组件共用同一个服务实例
})
export class EventService {
  private bannerClickedSource = new Subject<void>();
  bannerClicked$ = this.bannerClickedSource.asObservable();

  // 发布Banner点击事件
  triggerBannerClick() {
    this.bannerClickedSource.next();
  }
}

2. 修改Component1，触发事件 #

在Component1的TS文件中注入共享服务，给Banner按钮绑定点击事件，调用服务的事件发布方法：

import { Component } from '@angular/core';
import { EventService } from './event.service';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html'
})
export class Component1 {
  constructor(private eventService: EventService) {}

  onBannerClick() {
    this.eventService.triggerBannerClick();
  }
}

同时更新Component1的HTML，给按钮绑定点击方法：

<div>
   <router-outlet></router-outlet>
</div>

<div>
<button (click)="onBannerClick()">Banner</button>
</div>

3. 在Component3中订阅事件并打开弹窗 #

在Component3的TS文件中注入共享服务，订阅点击事件流，触发弹窗逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { EventService } from '../event.service';
import { Subscription } from 'rxjs';
// 替换成你实际使用的弹窗组件服务，比如Angular Material的MatDialog
import { MatDialog } from '@angular/material/dialog';
import { YourBannerDialogComponent } from './your-banner-dialog.component';

@Component({
  selector: 'app-component3',
  templateUrl: './component3.component.html'
})
export class Component3 implements OnInit, OnDestroy {
  private eventSubscription!: Subscription;

  constructor(
    private eventService: EventService,
    private dialog: MatDialog
  ) {}

  ngOnInit() {
    // 订阅Banner点击事件
    this.eventSubscription = this.eventService.bannerClicked$.subscribe(() => {
      this.openBannerPopup();
    });
  }

  openBannerPopup() {
    // 打开弹窗的具体逻辑，根据你用的弹窗组件调整
    this.dialog.open(YourBannerDialogComponent, {
      width: '400px',
      data: { /* 弹窗需要的初始化数据 */ }
    });
  }

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

关键注意点 #

• 确保EventService是全局提供的（providedIn: 'root'），保证所有组件拿到的是同一个实例。
• 必须在组件销毁时取消订阅，防止内存泄漏。
• 如果不用Angular Material的弹窗，直接替换成你项目中自定义的弹窗组件调用逻辑即可。

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