无需点击事件及对应方法，能否通过Service实现页面加载时组件传值？

完全可以通过Angular单例Service结合RxJS的BehaviorSubject实现无点击事件的跨组件数据传递，完美适配页面加载完成自动取数的需求，具体实现步骤如下：

1. 创建全局共享数据服务 #

BehaviorSubject会缓存最新的发射值，新订阅者会立即收到当前最新值，刚好适配页面加载直接取数的场景

// shared-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 声明为全局单例，所有组件共用同一个服务实例
})
export class SharedDataService {
  // 初始化默认值可根据业务调整，泛型替换为你实际传递的数据类型即可
  private productDataSubject = new BehaviorSubject<any>(null);
  // 对外暴露只读可观察对象，避免外部直接修改数据流
  public productData$ = this.productDataSubject.asObservable();

  // 提供数据更新方法
  setProductData(data: any): void {
    this.productDataSubject.next(data);
  }
}

2. 源组件（数据提供方）初始化阶段存入数据 #

在输出数据的组件ngOnInit生命周期中直接调用服务方法存数据，完全不需要点击事件触发：

// 源组件 ts 文件
import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  // 你的组件原有配置
})
export class SourceComponent implements OnInit {
  // 你需要传递的业务数据，这里为示例数据
  private productData = { id: 101, name: '示例商品', price: 299 };

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit(): void {
    // 页面初始化直接存入服务，不需要关联点击事件
    this.sharedDataService.setProductData(this.productData);
    // 原有的sendProductData方法可以直接删除
  }
}

对应你的模板代码可以直接删除冗余的按钮元素，最终模板可以简化为：

<app-header></app-header>
<router-outlet></router-outlet>

3. 接收数据的组件初始化阶段订阅取数 #

无论是app-header组件还是router-outlet加载的子组件，都可以在自身初始化阶段直接订阅拿到数据：

// 数据接收方组件（以app-header为例）
import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedDataService } from './shared-data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-header',
  // 原有组件配置
})
export class HeaderComponent implements OnInit, OnDestroy {
  public receivedProductData: any;
  private dataSubscription: Subscription;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit(): void {
    this.dataSubscription = this.sharedDataService.productData$.subscribe(data => {
      // 过滤服务初始化的默认空值
      if (data) {
        this.receivedProductData = data;
        // 拿到数据后执行业务逻辑即可
        console.log('自动获取到的产品数据：', this.receivedProductData);
      }
    })
  }

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

如果不想手动处理订阅销毁，也可以直接在模板中使用async管道自动管理订阅：

<!-- app-header 模板文件 -->
<div *ngIf="productData$ | async as product">
  商品名称：{{product.name}}，价格：{{product.price}}
</div>

其他说明 #

如果你的数据是异步获取的（比如从后端接口请求），只需要在接口请求返回后调用setProductData方法即可，所有订阅的组件会自动收到更新后的数据，不需要额外调整逻辑。

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