Angular 4中如何创建Mqtt数据服务的多实例/动态实例

Great question! Since you currently have your MqttdataproviderService (and related FormToClientService) set up as a global singleton, here are the most practical ways to create separate or dynamic instances for your components:

1. Component-Level Service Providers (Per-Component Instances) #

If you want each of your four components (map, data table, dashboard, line chart) to have their own isolated service instance, you can declare the service directly in the providers array of each component instead of relying on the global singleton.

Here's how to do it for your map component (repeat this pattern for the others):

// map.component.ts
import { Component, OnInit } from '@angular/core';
import { FormToClientService } from './path-to-your-service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  providers: [FormToClientService] // This creates a new instance for this component
})
export class MapComponent implements OnInit {
  constructor(private formToClientService: FormToClientService) {}

  ngOnInit() {
    // Subscribe to this component's unique service instance
    this.formToClientService.yourDataObservable.subscribe(data => {
      // Handle data for the map component
    });
  }
}

Each component with this setup will get its own FormToClientService instance, so their subscriptions won't interfere with each other. Just make sure to remove the service from your app.module's providers array (if you added it there) to avoid singleton overrides.

2. Factory Providers for Dynamic Parameterized Instances #

If you need more flexibility—like creating instances with different configurations (e.g., unique MQTT client IDs)—use Angular's FactoryProvider to generate instances on demand.

First, update your service to accept configuration parameters (remove providedIn: 'root' if you had it):

// form-to-client.service.ts
import { Injectable, Inject } from '@angular/core';

@Injectable() // No providedIn: 'root' here
export class FormToClientService {
  private clientId: string;

  constructor(@Inject('MQTT_CLIENT_ID') clientId: string) {
    this.clientId = clientId;
    // Initialize your MQTT connection using this unique clientId
  }

  // Your existing methods for fetching geometry/temperature data...
}

Then, in a component (or module), define the factory to create instances with different parameters:

// dashboard.component.ts
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  providers: [
    {
      provide: 'MQTT_CLIENT_ID',
      useValue: 'dashboard-mqtt-client' // Unique ID for this instance
    },
    {
      provide: FormToClientService,
      useFactory: (clientId: string) => new FormToClientService(clientId),
      deps: ['MQTT_CLIENT_ID'] // Inject the client ID into the factory
    }
  ]
})
export class DashboardComponent implements OnInit {
  constructor(private formToClientService: FormToClientService) {}
  // ... subscription logic
}

You can repeat this with different MQTT_CLIENT_ID values for each component to get uniquely configured service instances.

3. Manual Instance Creation with Injector #

For full runtime control (e.g., creating new instances on the fly based on user actions), use Angular's Injector to manually instantiate your service.

First, ensure your service isn't set as a singleton (remove providedIn: 'root'):

@Injectable()
export class FormToClientService {
  // Include any dependencies your service needs (e.g., HttpClient)
  constructor(private http: HttpClient) {}
}

Then, inject the Injector into your component and create instances when needed:

// line-chart.component.ts
import { Component, Injector, OnInit } from '@angular/core';
import { FormToClientService } from './path-to-your-service';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html'
})
export class LineChartComponent implements OnInit {
  private serviceInstances: FormToClientService[] = [];

  constructor(private injector: Injector) {}

  createNewMqttService(): void {
    // Create a new instance, automatically injecting dependencies like HttpClient
    const newInstance = this.injector.get(FormToClientService);
    this.serviceInstances.push(newInstance);
    
    // Subscribe to this new instance's data
    newInstance.yourDataObservable.subscribe(data => {
      // Handle data from this specific instance
    });
  }

  ngOnInit() {
    // Create an initial instance when the component loads
    this.createNewMqttService();
  }
}

This approach lets you create as many instances as you need at runtime, perfect for dynamic use cases.

Key Notes #

• Always remove the service from app.module's providers array if you're using component-level or dynamic instances—Angular's injector hierarchy prioritizes the closest provider, so a global singleton would override component-level instances otherwise.
• Each independent service instance will maintain its own Observable stream, so your components will only receive data from their assigned instance.

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