Angular 4中兄弟组件如何通信？勾选复选框后在另一组件展示数据

Hey there! Let's solve this sibling component communication scenario where checking checkboxes in Component 1 needs to trigger data display in Component 2. The most scalable and Angular-friendly approach here is to use a shared service—it acts as a central hub for passing data between components that don't have a direct parent-child relationship.

Step 1: Create a Shared Service #

First, we'll build a service that holds the state of selected map legends and provides observables for components to subscribe to. We'll use a BehaviorSubject because it retains the current value, so Component 2 will get the latest selection even if it initializes after Component 1.

// map-legend.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { MapLegend } from './map-legend.model'; // Create this interface for type safety

@Injectable({
  providedIn: 'root' // Ensures a single instance across the app (Angular 4+ compatible)
})
export class MapLegendService {
  private selectedLegendsSubject = new BehaviorSubject<MapLegend[]>([]);
  selectedLegends$: Observable<MapLegend[]> = this.selectedLegendsSubject.asObservable();

  // Update the selected legends when checkboxes change
  updateSelectedLegends(legends: MapLegend[]): void {
    const selected = legends.filter(legend => legend.checked);
    this.selectedLegendsSubject.next(selected);
  }
}

// map-legend.model.ts (optional but recommended)
export interface MapLegend {
  name: string;
  checked: boolean;
  dataToDisplay: any; // Add your custom data properties here
}

Step 2: Update Component 1 (Checkbox Component) #

Inject the shared service into Component 1, and call the updateSelectedLegends method whenever the checkbox state changes. We'll use ngModelChange to detect toggle events instantly.

<!-- component1.component.html -->
<div class="col-md-6" *ngFor="let mapLegend of mapLegends">
  <label class="checkbox">
    <input 
      type="checkbox" 
      name="mapLegend" 
      [value]="mapLegend.name" 
      [(ngModel)]="mapLegend.checked"
      (ngModelChange)="onLegendSelectionChange()"
    />
    <span class="checkbox__input"></span>
    <span class="checkbox__label"> {{mapLegend.name}}</span>
  </label>
</div>

// component1.component.ts
import { Component } from '@angular/core';
import { MapLegendService } from './map-legend.service';
import { MapLegend } from './map-legend.model';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html'
})
export class Component1Component {
  // Initialize your map legend data here
  mapLegends: MapLegend[] = [
    { name: 'Terrain', checked: false, dataToDisplay: 'Elevation and land cover data' },
    { name: 'Weather', checked: false, dataToDisplay: 'Real-time temperature and precipitation' },
    { name: 'Population', checked: false, dataToDisplay: 'Census data by region' }
  ];

  constructor(private mapLegendService: MapLegendService) {}

  onLegendSelectionChange(): void {
    this.mapLegendService.updateSelectedLegends(this.mapLegends);
  }
}

Step 3: Update Component 2 (Display Component) #

Inject the service into Component 2, subscribe to the selectedLegends$ observable, and use the emitted data to display the relevant information. Don't forget to unsubscribe to avoid memory leaks!

<!-- component2.component.html -->
<div *ngIf="selectedLegends.length > 0" class="selected-legends">
  <h3>Selected Legend Details</h3>
  <div *ngFor="let legend of selectedLegends" class="legend-item">
    <h4>{{legend.name}}</h4>
    <p>{{legend.dataToDisplay}}</p>
  </div>
</div>
<p *ngIf="selectedLegends.length === 0" class="no-selection">Select a legend to view its data</p>

// component2.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MapLegendService } from './map-legend.service';
import { MapLegend } from './map-legend.model';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2Component implements OnInit, OnDestroy {
  selectedLegends: MapLegend[] = [];
  private subscription: Subscription;

  constructor(private mapLegendService: MapLegendService) {}

  ngOnInit(): void {
    // Subscribe to get updates when selected legends change
    this.subscription = this.mapLegendService.selectedLegends$.subscribe(legends => {
      this.selectedLegends = legends;
    });
  }

  ngOnDestroy(): void {
    // Clean up the subscription when the component is destroyed
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Step 4: Configure Your Module #

Make sure to import FormsModule (required for ngModel) and provide the service if you're not using providedIn: 'root':

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';
import { MapLegendService } from './map-legend.service';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [Component1Component, Component2Component],
  providers: [MapLegendService], // Skip if using providedIn: 'root'
  bootstrap: [AppComponent]
})
export class AppModule {}

Alternative: Parent Component as Middleman #

If your two siblings share a direct parent, you could also pass data through the parent:

• Emit an event from Component 1 on checkbox change
• Catch the event in the parent component
• Pass the selected data to Component 2 via @Input()

However, the shared service approach is more scalable—especially if your components might move to different parts of the app later, or if you need to share this state with other components.

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