Angular：如何根据UI上下文为共享组件注入对应业务服务并调用其方法？

Great question! This is a common scenario when building reusable Angular components, and there are clean, scalable solutions to avoid cluttering your shared component with every possible business service dependency. Let's break down the answers to your two questions:

2. Can we abstract services and inject the abstracted version into the shared component? #

Absolutely! This is the recommended best practice because it follows the Dependency Inversion Principle—your shared component depends on an abstraction (a contract) rather than concrete service implementations. Here's how to implement it:

Step 1: Define an abstract base service #

Create an abstract class that defines the common methods your shared component needs. This acts as the contract all business services must follow:

// core/services/base-action.service.ts
export abstract class BaseActionService {
  abstract dosomething(): void;
  // Add other shared methods here (e.g., edit, delete)
}

Step 2: Update business services to implement the abstract class #

Modify your UserService and ProductService to implement this abstract class, ensuring they adhere to the contract:

// user/services/user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService implements BaseActionService {
  dosomething() {
    console.log('Performing action for user');
    // Your user-specific logic here
  }

  // Existing UserService methods...
  users: Users = [];
}

// product/services/product.service.ts
@Injectable({ providedIn: 'root' })
export class ProductService implements BaseActionService {
  dosomething() {
    console.log('Performing action for product');
    // Your product-specific logic here
  }

  // Existing ProductService methods...
  product: Products = [];
}

Step 3: Provide the concrete service in the parent component context #

In each list component (UserListComponent and ProductListComponent), configure the Angular injector to provide the concrete service when the abstract BaseActionService is requested:

// user/components/user-list.component.ts
@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  providers: [
    { 
      provide: BaseActionService, 
      useExisting: UserService // Use the already-injected UserService instance
    }
  ]
})
export class UserListComponent implements OnInit {
  users: Users = [];

  constructor(private readonly userService: UserService) {}

  ngOnInit(): void {
    this.users = this.userService.users;
  }
}

// product/components/product-list.component.ts
@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  providers: [
    { 
      provide: BaseActionService, 
      useExisting: ProductService // Use the already-injected ProductService instance
    }
  ]
})
export class ProductListComponent implements OnInit {
  products: Products = [];

  constructor(private readonly productService: ProductService) {}

  ngOnInit(): void {
    this.products = this.productService.product;
  }
}

Step 4: Update the shared component to use the abstract service #

Now your DropdownActionButton only needs to inject the abstract BaseActionService—no more conditional checks or multiple service dependencies:

// core/components/dropdown-action-button.component.ts
@Component({
  selector: 'app-dropdown-action-button',
  templateUrl: './dropdown-action-button.component.html'
})
export class DropdownActionButton {
  constructor(private readonly actionService: BaseActionService) {}

  handleClick() {
    // No more if/else checks—just call the abstract method
    this.actionService.dosomething();
  }
}

1. How to inject the required service into the shared component in a specific context? #

The abstraction approach above already solves this problem, but if you prefer not to use abstract classes, you can use injection tokens to achieve context-specific injection:

Step 1: Define an injection token #

// core/tokens/action-service.token.ts
import { InjectionToken } from '@angular/core';
import { BaseActionService } from '../services/base-action.service';

export const ACTION_SERVICE = new InjectionToken<BaseActionService>('Context-specific action service');

Step 2: Provide the token in parent components #

// In UserListComponent's providers:
{ provide: ACTION_SERVICE, useExisting: UserService }

// In ProductListComponent's providers:
{ provide: ACTION_SERVICE, useExisting: ProductService }

Step 3: Inject the token in the shared component #

// core/components/dropdown-action-button.component.ts
import { Inject } from '@angular/core';
import { ACTION_SERVICE } from '../tokens/action-service.token';
import { BaseActionService } from '../services/base-action.service';

@Component({...})
export class DropdownActionButton {
  constructor(@Inject(ACTION_SERVICE) private readonly actionService: BaseActionService) {}

  handleClick() {
    this.actionService.dosomething();
  }
}

Key Benefits of This Approach: #

• Scalability: When you add a new list (e.g., OrderListComponent), just create an OrderService that implements BaseActionService, and configure the provider in OrderListComponent—no changes needed to DropdownActionButton.
• Maintainability: No more messy conditional logic in the shared component.
• Testability: You can easily mock the BaseActionService when testing the shared component.

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