Angular中无事件触发时，如何将模板数据传入非父子组件？

针对你提出的场景——无需按钮、表单事件触发，将模板循环中的item传递给非父子组件，以下是两种实用方案：

方案一：共享服务 + RxJS 可观察对象 #

这是Angular中非父子组件传值的通用方案，适合数据加载完成后自动传递的场景。

1. 创建共享服务 #

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

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  // 定义Subject作为数据传递载体
  private itemSubject = new Subject<any>();
  // 对外暴露可观察对象，避免外部直接修改Subject
  item$ = this.itemSubject.asObservable();

  // 发送数据的方法
  sendItem(item: any) {
    this.itemSubject.next(item);
  }
}

2. 在数据源组件（ItemsComponent）中发送数据 #

修正你代码中ngOnInit的错误写法（Angular钩子函数无参数），在数据就绪后传递目标item：

// items.component.ts
import { Component, OnInit } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-items',
  templateUrl: './items.html'
})
export class ItemsComponent implements OnInit {
  items: any[] = [/* 你的业务数据 */];

  constructor(private dataService: DataSharingService) {}

  ngOnInit(): void {
    // 示例：传递数组中第一个item，可根据需求调整逻辑
    if (this.items.length > 0) {
      this.dataService.sendItem(this.items[0]);
    }
  }
}

3. 在目标非父子组件中接收数据 #

组件初始化时订阅服务的可观察对象，自动获取传递的item：

// target.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSharingService } from './data-sharing.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-target',
  templateUrl: './target.html'
})
export class TargetComponent implements OnInit, OnDestroy {
  currentItem: any;
  private dataSubscription!: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit(): void {
    // 订阅数据，初始化时自动接收
    this.dataSubscription = this.dataService.item$.subscribe(item => {
      this.currentItem = item;
      console.log(item); // 此处打印传递过来的item
    });
  }

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

方案二：路由参数传递（适用于路由关联的组件） #

如果目标组件是通过路由跳转加载的，可以通过路由参数传递数据，组件初始化时读取参数。

1. 配置路由 #

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ItemsComponent } from './items.component';
import { TargetComponent } from './target.component';

const routes: Routes = [
  { path: 'items', component: ItemsComponent },
  // 定义路由参数itemId
  { path: 'target/:itemId', component: TargetComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. 在ItemsComponent中自动导航并传参 #

// items.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-items',
  templateUrl: './items.html'
})
export class ItemsComponent implements OnInit {
  items: any[] = [/* 示例数据：{id: 1, name: '示例Item'} */];

  constructor(private router: Router) {}

  ngOnInit(): void {
    if (this.items.length > 0) {
      // 自动跳转到目标组件并传递itemId
      this.router.navigate(['/target', this.items[0].id]);
    }
  }
}

3. 在TargetComponent中读取路由参数 #

// target.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-target',
  templateUrl: './target.html'
})
export class TargetComponent implements OnInit {
  itemId: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 读取路由参数
    this.itemId = this.route.snapshot.paramMap.get('itemId');
    console.log(this.itemId);
    // 若需要完整item数据，可结合服务根据id从数据源获取
  }
}

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