如何在非嵌套的list组件与details组件间传递对象？

Got it, since your List and Details components are totally separate (not nested as parent-child), the @Input() decorator won’t work directly here—it’s designed exclusively for parent-to-child communication. Let’s walk through the most practical, real-world ways to share that object between your two components:

1. Shared Service (Most Common for Independent Components) #

This is the go-to method for any non-parent-child component communication in Angular. You’ll create a shared service to act as a middleman for passing data between the two components.

Step 1: Create a Data Sharing Service #

First, build a singleton service (so it’s the same instance across your app) with an observable to hold and emit the selected object:

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

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  // Replace `any` with your actual object type (e.g., `Product` or `User`)
  private selectedItemSubject = new BehaviorSubject<any>(null);
  public selectedItem$: Observable<any> = this.selectedItemSubject.asObservable();

  // Method to update the selected object from the List component
  setSelectedItem(item: any): void {
    this.selectedItemSubject.next(item);
  }
}

Step 2: Emit Data from the List Component #

Inject the service into your List component, then call setSelectedItem() when the user picks an item (like on a click):

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

@Component({
  selector: 'app-list',
  template: `
    <div *ngFor="let item of items" (click)="onItemSelect(item)" class="list-item">
      {{ item.name }}
    </div>
  `
})
export class ListComponent {
  // Replace with your actual list of objects
  items = [{ id: 1, name: 'Item 1', description: 'First item details' }, 
           { id: 2, name: 'Item 2', description: 'Second item details' }];

  constructor(private dataSharingService: DataSharingService) {}

  onItemSelect(item: any): void {
    this.dataSharingService.setSelectedItem(item);
  }
}

Step 3: Subscribe to Data in the Details Component #

Inject the service into your Details component and subscribe to the observable to receive the object:

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

@Component({
  selector: 'app-details',
  template: `
    <div *ngIf="selectedItem" class="details-card">
      <h2>{{ selectedItem.name }}</h2>
      <p>{{ selectedItem.description }}</p>
    </div>
    <div *ngIf="!selectedItem" class="empty-state">
      Select an item from the list to see details
    </div>
  `
})
export class DetailsComponent implements OnInit {
  selectedItem: any;

  constructor(private dataSharingService: DataSharingService) {}

  ngOnInit(): void {
    this.dataSharingService.selectedItem$.subscribe(item => {
      this.selectedItem = item;
    });
  }
}

2. Route Parameters (For Page Navigation Scenarios) #

If your List and Details components live on separate routes (e.g., /list and /details), you can pass the object’s ID via route parameters, then fetch the full object in the Details component (from a service or API).

Step 1: Set Up Route with Parameter #

Add a route for your Details component that accepts an itemId parameter:

// app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list.component';
import { DetailsComponent } from './details.component';

const routes: Routes = [
  { path: 'list', component: ListComponent },
  { path: 'details/:itemId', component: DetailsComponent }
];

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

Step 2: Navigate from List Component with ID #

Use the Router service to navigate to the Details route and pass the item’s ID:

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

@Component({
  selector: 'app-list',
  template: `
    <div *ngFor="let item of items" (click)="navigateToDetails(item.id)" class="list-item">
      {{ item.name }}
    </div>
  `
})
export class ListComponent {
  items = [{ id: 1, name: 'Item 1', description: 'First item details' }, 
           { id: 2, name: 'Item 2', description: 'Second item details' }];

  constructor(private router: Router) {}

  navigateToDetails(itemId: number): void {
    this.router.navigate(['/details', itemId]);
  }
}

Step 3: Fetch Object in Details Component #

Use ActivatedRoute to get the parameter, then fetch the full object from your service or API:

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

@Component({
  selector: 'app-details',
  template: `
    <div *ngIf="selectedItem" class="details-card">
      <h2>{{ selectedItem.name }}</h2>
      <p>{{ selectedItem.description }}</p>
    </div>
  `
})
export class DetailsComponent implements OnInit {
  selectedItem: any;

  constructor(
    private route: ActivatedRoute,
    private dataSharingService: DataSharingService
  ) {}

  ngOnInit(): void {
    const itemId = this.route.snapshot.paramMap.get('itemId');
    if (itemId) {
      // Fetch the full object using the ID (replace with your actual data fetch logic)
      this.selectedItem = this.dataSharingService.getItemById(+itemId);
    }
  }
}

3. State Management (For Large Apps) #

If your app has complex state needs (multiple components sharing data, undo/redo functionality, etc.), use a state management library like NgRx or Akita. These libraries store your app’s state in a single, centralized store—both components can read from or update the state as needed. This is overkill for small apps, but ideal for scaling.

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