Tôi có một tập hợp các thành phần angle2 sẽ được đưa vào một số dịch vụ. Suy nghĩ đầu tiên của tôi là tốt nhất nên tạo một lớp siêu cấp và tiêm dịch vụ ở đó. Bất kỳ thành phần nào của tôi sau đó sẽ mở rộng lớp cha đó nhưng cách tiếp cận này không hoạt động.

Ví dụ đơn giản:

export class AbstractComponent {
  constructor(private myservice: MyService) {
    // Inject the service I need for all components
  }
}

export MyComponent extends AbstractComponent {
  constructor(private anotherService: AnotherService) {
    super(); // This gives an error as super constructor needs an argument
  }
}

Tôi có thể giải quyết điều này bằng cách chèn vào MyServicebên trong mỗi và mọi thành phần và sử dụng đối số đó cho super()cuộc gọi nhưng điều đó rõ ràng là một số loại vô lý.

Làm thế nào để tổ chức các thành phần của tôi một cách chính xác để chúng kế thừa một dịch vụ từ siêu lớp?

Tôi có thể giải quyết vấn đề này bằng cách chèn MyService bên trong mỗi thành phần và sử dụng đối số đó cho lệnh gọi super () nhưng điều đó rõ ràng là một số loại vô lý.

Nó không vô lý. Đây là cách thức hoạt động của các hàm khởi tạo và chèn hàm tạo.

Mọi lớp có thể tiêm phải khai báo các phụ thuộc là các tham số của phương thức khởi tạo và nếu lớp cha cũng có các thành phần phụ thuộc thì chúng cũng cần được liệt kê trong phương thức khởi tạo của lớp con và được truyền cùng với lớp cha bằng super(dep1, dep2)lời gọi.

Đi vòng quanh một kim phun và nhận được các phụ thuộc một cách cấp bậc có những bất lợi nghiêm trọng.

Nó ẩn các phụ thuộc khiến mã khó đọc hơn.
Nó vi phạm kỳ vọng của một người quen thuộc với cách Angular2 DI hoạt động.
Nó phá vỡ quá trình biên dịch ngoại tuyến tạo ra mã tĩnh để thay thế DI khai báo và bắt buộc để cải thiện hiệu suất và giảm kích thước mã.

Giải pháp cập nhật, ngăn nhiều trường hợp myService được tạo bằng cách sử dụng bộ phun toàn cầu.

import {Injector} from '@angular/core';
import {MyServiceA} from './myServiceA';
import {MyServiceB} from './myServiceB';
import {MyServiceC} from './myServiceC';

export class AbstractComponent {
  protected myServiceA:MyServiceA;
  protected myServiceB:MyServiceB;
  protected myServiceC:MyServiceC;

  constructor(injector: Injector) {
    this.settingsServiceA = injector.get(MyServiceA);
    this.settingsServiceB = injector.get(MyServiceB);
    this.settingsServiceB = injector.get(MyServiceC);
  }
}

export MyComponent extends AbstractComponent {
  constructor(
    private anotherService: AnotherService,
    injector: Injector
  ) {
    super(injector);

    this.myServiceA.JustCallSomeMethod();
    this.myServiceB.JustCallAnotherMethod();
    this.myServiceC.JustOneMoreMethod();
  }
}

Điều này sẽ đảm bảo rằng MyService có thể được sử dụng trong bất kỳ lớp nào mở rộng AbstractComponent mà không cần phải đưa MyService vào mọi lớp dẫn xuất.

Có một số nhược điểm đối với giải pháp này (xem Ccomment từ @ Günter Zöchbauer bên dưới câu hỏi ban đầu của tôi):

• Tiêm kim tiêm toàn cầu chỉ là cải tiến khi có một số dịch vụ khác nhau cần tiêm ở nhiều nơi. Nếu bạn chỉ có một dịch vụ được chia sẻ thì có lẽ tốt hơn / dễ dàng hơn để đưa dịch vụ đó vào (các) lớp dẫn xuất
• Giải pháp của tôi và giải pháp thay thế được đề xuất của anh ấy đều có nhược điểm là khiến chúng khó nhận biết lớp nào phụ thuộc vào dịch vụ nào.

Để có lời giải thích bằng văn bản rất tốt về việc tiêm phụ thuộc trong Angular2, hãy xem bài đăng trên blog này đã giúp tôi giải quyết vấn đề rất nhiều: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular- 2.html

Thay vì tiêm tất cả các dịch vụ theo cách thủ công, tôi đã tạo một lớp cung cấp các dịch vụ, ví dụ: nó sẽ đưa các dịch vụ vào. Lớp này sau đó được đưa vào các lớp dẫn xuất và được chuyển cho lớp cơ sở.

Lớp có nguồn gốc:

@Component({
    ...
    providers: [ProviderService]
})
export class DerivedComponent extends BaseComponent {
    constructor(protected providerService: ProviderService) {
        super(providerService);
    }
}

Lớp cơ sở:

export class BaseComponent {
    constructor(protected providerService: ProviderService) {
        // do something with providerService
    }
}

Lớp cung cấp dịch vụ:

@Injectable()
export class ProviderService {
    constructor(private _apiService: ApiService, private _authService: AuthService) {
    }
}

Thay vì tiêm một dịch vụ có tất cả các dịch vụ khác làm phụ thuộc, như sau:

class ProviderService {
    constructor(private service1: Service1, private service2: Service2) {}
}

class BaseComponent {
    constructor(protected providerService: ProviderService) {}

    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        // Access to all application services with providerService
        this.providerService.service1
    }
}

Tôi sẽ bỏ qua bước bổ sung này và chỉ cần thêm vào tất cả các dịch vụ trong BaseComponent, như sau:

class BaseComponent {
    constructor(protected service1: Service1, protected service2: Service2) {}
}

class DerivedComponent extends BaseComponent {
    ngOnInit() {
        this.service1;
        this.service2;
    }
}

Kỹ thuật này giả định 2 điều:

1. Mối quan tâm của bạn hoàn toàn liên quan đến sự kế thừa các thành phần. Rất có thể, lý do bạn đặt câu hỏi này là do có quá nhiều mã không khô (WET?) Mà bạn cần lặp lại trong mỗi lớp dẫn xuất. Nếu bạn muốn hưởng lợi từ một điểm vào duy nhất cho tất cả các thành phần và dịch vụ của mình , bạn sẽ cần thực hiện thêm bước.

2. Mọi thành phần đều mở rộng BaseComponent

Cũng có một bất lợi nếu bạn quyết định sử dụng hàm tạo của một lớp dẫn xuất, vì bạn sẽ cần gọi super()và chuyển tất cả các phụ thuộc vào. Mặc dù tôi không thực sự thấy trường hợp sử dụng cần thiết phải sử dụng constructorthay thế ngOnInit, nhưng hoàn toàn có khả năng trường hợp sử dụng đó tồn tại.

Nếu lớp cha được lấy từ trình cắm của bên thứ ba (và bạn không thể thay đổi nguồn), bạn có thể thực hiện việc này:

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

export MyComponent extends AbstractComponent {
  constructor(
    protected injector: Injector,
    private anotherService: AnotherService
  ) {
    super(injector.get(MyService));
  }
}

hoặc cách tốt nhất (chỉ giữ một tham số trong hàm tạo):

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

export MyComponent extends AbstractComponent {
  private anotherService: AnotherService;

  constructor(
    protected injector: Injector
  ) {
    super(injector.get(MyService));
    this.anotherService = injector.get(AnotherService);
  }
}

Từ những gì tôi hiểu để kế thừa từ lớp cơ sở, trước tiên bạn cần khởi tạo nó. Để khởi tạo nó, bạn cần truyền các tham số bắt buộc của phương thức khởi tạo của nó, do đó bạn truyền chúng từ con sang cha thông qua lời gọi super () sao cho hợp lý. Tất nhiên, máy tiêm là một giải pháp khả thi khác.

HACK LỚN

Cách đây một thời gian, một số khách hàng của tôi muốn tham gia hai dự án góc LỚN cho ngày hôm qua (góc v4 thành góc v8). Dự án v4 sử dụng lớp BaseView cho mỗi thành phần và nó chứa tr(key)phương thức cho các bản dịch (trong v8 tôi sử dụng ng-translate). Vì vậy, để tránh chuyển đổi hệ thống dịch và chỉnh sửa hàng trăm mẫu (trong v4) hoặc thiết lập 2 hệ thống dịch song song, tôi sử dụng cách hack xấu xí sau (tôi không tự hào về nó) - trong AppModulelớp tôi thêm hàm tạo sau:

export class AppModule { 
    constructor(private injector: Injector) {
        window['UglyHackInjector'] = this.injector;
    }
}

và bây giờ AbstractComponentbạn có thể sử dụng

export class AbstractComponent {
  private myservice: MyService = null;

  constructor() {
    this.myservice = window['UglyHackInjector'].get(MyService);
  }
}