Angular组件间用Service通信是否合理？含模态框等场景咨询

Absolutely, using Angular Services for component communication is not just reasonable—it's one of the recommended patterns for specific scenarios! Let's break down your two questions in detail:

1. Passing modal-related data via Service: Is this approach reasonable? #

Your current approach of assigning this.taskService.activeTask = this.currentTask before opening the modal works for simple cases, but there's a more robust, Angular-idiomatic way to handle this.

Directly setting a property on the Service can lead to issues like:

• The modal component might not detect the property change if it initializes before the value is set
• Race conditions if multiple modals or components interact with the same Service property

A better practice is to use RxJS Subjects/BehaviorSubjects to create a reactive data stream. This ensures the modal component can subscribe to and react to data changes automatically. Here's how you could adjust your code:

In your TaskService:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Task } from './task.model'; // Adjust to your Task type

@Injectable({ providedIn: 'root' })
export class TaskService {
  private activeTaskSubject = new BehaviorSubject<Task | null>(null);
  public activeTask$: Observable<Task | null> = this.activeTaskSubject.asObservable();

  setActiveTask(task: Task): void {
    this.activeTaskSubject.next(task);
  }
}

When opening the modal:

this.taskService.setActiveTask(this.currentTask);
this.tagSelectModalRef = this.modalService.show(TagSelectorComponent, {});

In TagSelectorComponent:

import { Subscription } from 'rxjs';
import { TaskService } from '../task.service';

// ...

private activeTaskSub!: Subscription;

constructor(private taskService: TaskService) {}

ngOnInit(): void {
  this.activeTaskSub = this.taskService.activeTask$.subscribe(task => {
    if (task) {
      // Handle the active task data here
    }
  });
}

ngOnDestroy(): void {
  this.activeTaskSub.unsubscribe(); // Clean up subscription to avoid memory leaks
}

That said, your original approach isn't "wrong" for simple, single-modal scenarios—it just lacks the robustness of reactive patterns. So yes, using a Service to pass modal data is absolutely reasonable.

2. Using Service communication for side-by-side components #

This also depends on your component structure:

• If the components share a common parent:优先考虑使用@Input()/@Output()或者模板引用变量。这种方式的数据流更清晰，父组件作为协调者，代码维护起来更简单。
• If the components have no common parent, or are in separate modules: Using a Service is an excellent choice. It decouples the components from each other, avoiding messy "prop drilling" through multiple component layers. Again, use RxJS Subjects to emit events from the clicked component, and have the target component subscribe to those events.

Key reminders for Service-based communication: #

• Ensure your Service is a singleton (using providedIn: 'root' is the easiest way in Angular) so all components share the same instance.
• Don't overuse Services: For simple parent-child or sibling relationships, @Input()/@Output() is more straightforward and keeps data flow explicit.

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