Angular 2+ 中的服務遺產

Question

我有一個從父 class 繼承的組件，它本身被注入服務。 該服務也用於子 class（組件）中。 我是否必須在父 class 中兩次導入和注入服務？

對我來說，這似乎是代碼重復（並且有點雞和蛋，因為孩子必須導入服務才能將其作為參數傳遞給父母......它已經導入了它。）。

app.component.ts （子類）

import { Component, OnInit } from '@angular/core';
import { HelperClass } from 'src/app/helper-class';
/**** Duplicate import with the parent class HelperClass ****/
import { MyService } from 'src/app/my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class MyComponent extends HelperClass implements OnInit {

  /**** Duplicate injection with HelperClass ****/
  constructor(private service: MyService) {
    super(service);
  }

  ngOnInit(): void {
    this.myService.log('my service called in MyComponent');
    this.helper_class_method();
  }

}

helper-class.ts （父類）

import { MyService } from 'src/app/my-service.service';

export class HelperClass {
  constructor(public myService: MyService) { }

  helper_class_method() {
    console.log('helper_class method');
  }
}

我的服務.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  log(text: string) { console.log(text); }
}

示例代碼位於https://github.com/manu2504/service-heritage-angular/blob/main/src/app/app.component.ts

Answer 1

如果您只需要MyService ，則可以從HelperClass中刪除 inheritance ：

export class MyComponent implements OnInit {
  constructor(private service: MyService) {
  }
  
  //
  someMethod() => {
     this.service // other code is omitted for the brevity
  }
}

或者，您可以在組件中創建 class HelperClass的實例：

export class MyComponent implements OnInit {
  public helper: HelperClass;
  constructor(private service: MyService) {
    this.helper = new HelperClass(service);
  }
  
  //
  someMethod() => {
     this.service // other code is omitted for the brevity
  }
}

Answer 2

我將助手/父 class 設為服務，我將其注入組件中，這解決了問題。

組件可以訪問輔助服務的公共屬性，包括輔助服務導入的服務，組件中不再需要導入myService。

新代碼：

助手類.ts

import { Injectable } from '@angular/core';
import { MyService } from 'src/app/my-service.service';

@Injectable({
  providedIn: 'root'
})
export class HelperClass {
  constructor(public myService: MyService) { } 

  helper_class_method() {
    console.log('helper_class method');
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HelperClass } from 'src/app/helper-class';

@Component({
  selector: 'app-my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class MyComponent implements OnInit {

  // Duplicate injection with HelperClass
  constructor(
    private helper: HelperClass
  ) { }

  ngOnInit(): void {
    // No more the need to declare myService locally
    this.helper.myService.log('my service called in MyComponent');
    this.helper.helper_class_method();
  }
}