Làm cách nào để tạo một dịch vụ đơn lẻ trong Angular 2?

Tôi đã đọc rằng tiêm khi bootstrapping nên có tất cả trẻ em chia sẻ cùng một thể hiện, nhưng các thành phần chính và tiêu đề của tôi (ứng dụng chính bao gồm thành phần tiêu đề và ổ cắm bộ định tuyến) mỗi loại có một phiên bản dịch vụ riêng của tôi.

Tôi có một Dịch vụ FacebookS mà tôi sử dụng để thực hiện các cuộc gọi đến api javascript facebook và Dịch vụ người dùng sử dụng Dịch vụ FacebookS. Đây là bootstrap của tôi:

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

Từ nhật ký của tôi, có vẻ như cuộc gọi bootstrap kết thúc, sau đó tôi thấy FacebookService sau đó UserService được tạo trước khi mã trong mỗi hàm tạo chạy, MainAppComponent, HeaderComponent và DefaultComponent:

Jason hoàn toàn đúng! Nó gây ra bởi cách tiêm phụ thuộc hoạt động. Nó dựa trên kim phun phân cấp.

Có một số kim phun trong ứng dụng Angular2:

• Cái gốc bạn cấu hình khi bootstrapping ứng dụng của bạn
• Một kim phun cho mỗi thành phần. Nếu bạn sử dụng một thành phần bên trong một thành phần khác. Người tiêm thành phần là con của thành phần cha mẹ. Thành phần ứng dụng (thành phần bạn chỉ định khi tăng cường ứng dụng của bạn) có trình tiêm gốc là cha mẹ).

Khi Angular2 cố gắng tiêm một cái gì đó vào hàm tạo thành phần:

• Nó nhìn vào kim phun liên kết với các thành phần. Nếu có một kết hợp, nó sẽ sử dụng nó để lấy ví dụ tương ứng. Trường hợp này được tạo ra một cách lười biếng và là một đơn vị cho người tiêm này.
• Nếu không có nhà cung cấp ở cấp độ này, nó sẽ xem xét công cụ tiêm cha mẹ (v.v.).

Vì vậy, nếu bạn muốn có một singleton cho toàn bộ ứng dụng, bạn cần phải có nhà cung cấp được xác định ở cấp độ của trình tiêm gốc hoặc trình tiêm thành phần ứng dụng.

Nhưng Angular2 sẽ nhìn vào cây kim phun từ phía dưới. Điều này có nghĩa là nhà cung cấp ở mức thấp nhất sẽ được sử dụng và phạm vi của trường hợp liên quan sẽ là mức này.

Xem câu hỏi này để biết thêm chi tiết:

• Cách tốt nhất để tiêm một dịch vụ này vào dịch vụ khác trong góc 2 (Beta) là gì?

Cập nhật (Góc 6 +)

Cách được đề xuất để tạo một dịch vụ đơn lẻ đã thay đổi. Hiện tại nên chỉ định trong trình @Injectabletrang trí trên dịch vụ rằng nó sẽ được cung cấp trong 'root'. Điều này rất có ý nghĩa với tôi và không cần phải liệt kê tất cả các dịch vụ được cung cấp trong các mô-đun của bạn nữa. Bạn chỉ cần nhập các dịch vụ khi bạn cần và họ tự đăng ký ở nơi thích hợp. Bạn cũng có thể chỉ định một mô-đun để nó sẽ chỉ được cung cấp nếu mô-đun được nhập.

@Injectable({
  providedIn: 'root',
})
export class ApiService {
}

• https://angular.io/guide/singleton-service
• https://angular.io/guide/providers

Cập nhật (Góc 2)

Với NgModule, cách để làm điều đó bây giờ tôi nghĩ là tạo ra một 'CoreModule' với lớp dịch vụ của bạn trong đó và liệt kê dịch vụ trong các nhà cung cấp của mô-đun. Sau đó, bạn nhập mô-đun lõi trong mô-đun ứng dụng chính của mình, nó sẽ cung cấp một thể hiện cho bất kỳ đứa trẻ nào yêu cầu lớp đó trong các hàm tạo của chúng:

CoreModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiService } from './api.service';

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [ // components that we want to make available
    ],
    declarations: [ // components for use in THIS module
    ],
    providers: [ // singleton services
        ApiService,
    ]
})
export class CoreModule { }

AppModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
    declarations: [ AppComponent ],
    imports: [
        CommonModule,
        CoreModule // will provide ApiService
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Câu trả lời gốc

Nếu bạn liệt kê một nhà cung cấp bootstrap(), bạn không cần liệt kê chúng trong trang trí thành phần của bạn:

import { ApiService } from '../core/api-service';

@Component({
    selector: 'main-app',
    templateUrl: '/views/main-app.html',
    // DO NOT LIST PROVIDERS HERE IF THEY ARE IN bootstrap()!
    // (unless you want a new instance)
    //providers: [ApiService]
})
export class MainAppComponent {
    constructor(private api: ApiService) {}
}

Trong thực tế, việc liệt kê lớp của bạn trong 'nhà cung cấp sẽ tạo ra một thể hiện mới của nó, nếu bất kỳ thành phần cha mẹ nào đã liệt kê nó thì trẻ em không cần và nếu chúng làm thì chúng sẽ có một thể hiện mới.

Tôi biết góc cạnh có kim phun phân cấp như Thierry nói.

Nhưng tôi có một lựa chọn khác ở đây trong trường hợp bạn tìm thấy một trường hợp sử dụng mà bạn không thực sự muốn tiêm nó cho phụ huynh.

Chúng tôi có thể đạt được điều đó bằng cách tạo một phiên bản của dịch vụ và cung cấp luôn trả lại điều đó.

import { provide, Injectable } from '@angular/core';
import { Http } from '@angular/core'; //Dummy example of dependencies

@Injectable()
export class YourService {
  private static instance: YourService = null;

  // Return the instance of the service
  public static getInstance(http: Http): YourService {
    if (YourService.instance === null) {
       YourService.instance = new YourService(http);
    }
    return YourService.instance;
  }

  constructor(private http: Http) {}
}

export const YOUR_SERVICE_PROVIDER = [
  provide(YourService, {
    deps: [Http],
    useFactory: (http: Http): YourService => {
      return YourService.getInstance(http);
    }
  })
];

Và sau đó trên thành phần của bạn, bạn sử dụng phương thức cung cấp tùy chỉnh của bạn.

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

Và bạn nên có một dịch vụ đơn lẻ mà không phụ thuộc vào người tiêm phân cấp.

Tôi không nói rằng đây là một cách tốt hơn, chỉ trong trường hợp ai đó gặp vấn đề trong đó người tiêm thuốc phân cấp không thể thực hiện được.

Cú pháp đã được thay đổi. Kiểm tra liên kết này

Phụ thuộc là singletons trong phạm vi của một người tiêm. Trong ví dụ dưới đây, một cá thể HeroService được chia sẻ giữa các HeroesComponent và các con HeroListComponent của nó.

Bước 1. Tạo lớp singleton với trình trang trí @Injectable

@Injectable()
export class HeroService {
  getHeroes() { return HEROES;  }
}

Bước 2. Tiêm vào hàm tạo

export class HeroListComponent { 
  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }

Bước 3. Đăng ký nhà cung cấp

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule,
    JsonpModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent,
    routedComponents
  ],
  providers: [
    HeroService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Thêm trình @Injectabletrang trí vào Dịch vụ và đăng ký làm nhà cung cấp trong Mô-đun gốc sẽ biến nó thành một đơn vị.

điều này dường như đang làm việc tốt cho tôi

@Injectable()
export class MyStaticService {
  static instance: MyStaticService;

  constructor() {
    return MyStaticService.instance = MyStaticService.instance || this;
  }
}

Dưới đây là một ví dụ hoạt động với phiên bản Angular 2.3. Chỉ cần gọi hàm tạo của dịch vụ theo cách độc lập như hàm tạo này (private _userService: UserService). Và nó sẽ tạo ra một singleton cho ứng dụng.

user.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';
import { User } from '../object/user';


@Injectable()
export class UserService {
    private userChangedSource;
    public observableEvents;
    loggedUser:User;

    constructor() {
       this.userChangedSource = new Subject<any>();
       this.observableEvents = this.userChangedSource.asObservable();
    }

    userLoggedIn(user:User) {
        this.loggedUser = user;
        this.userChangedSource.next(user);
    }

    ...
}

app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../service/user.service';
import { User } from '../object/user';

@Component({
    selector: 'myApp',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    loggedUser:User;

    constructor(private _userService:UserService) { 
        this._userService.observableEvents.subscribe(user => {
                this.loggedUser = user;
                console.log("event triggered");
        });
    }
    ...
}

A singleton servicelà một dịch vụ chỉ tồn tại một thể hiện trong một ứng dụng.

Có (2) cách cung cấp dịch vụ đơn cho ứng dụng của bạn.

1. sử dụng providedIntài sản, hoặc

2. cung cấp mô-đun trực tiếp trong AppModuleứng dụng

Sử dụng được cung cấp trong

Bắt đầu với Angular 6.0, cách ưa thích để tạo dịch vụ đơn lẻ là đặt providedIngốc trên @Injectable()trang trí của dịch vụ . Điều này nói với Angular để cung cấp dịch vụ trong thư mục gốc.

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

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

Mảng nhà cung cấp NgModule

Trong các ứng dụng được xây dựng với các phiên bản Angular trước 6.0, các dịch vụ được đăng ký mảng nhà cung cấp NgModule như sau:

@NgModule({
  ...
  providers: [UserService],
  ...
})

Nếu đây NgModulelà root AppModule, UserService sẽ là một singleton và có sẵn trong toàn bộ ứng dụng. Mặc dù bạn có thể thấy nó được mã hóa theo cách này, nhưng sử dụng thuộc providedIntính của trình @Injectable()trang trí trên chính dịch vụ thì tốt hơn là Angular 6.0 vì nó làm cho dịch vụ của bạn có thể bị rung.

Bạn có thể sử dụng useValuetrong các nhà cung cấp

import { MyService } from './my.service';

@NgModule({
...
  providers: [ { provide: MyService, useValue: new MyService() } ],
...
})

Từ Angular @ 6, bạn có thể có providedInmột Injectable.

@Injectable({
  providedIn: 'root'
})
export class UserService {

}

Kiểm tra tài liệu ở đây

Có hai cách để biến dịch vụ thành một đơn vị trong Angular:

1. Khai báo rằng dịch vụ nên được cung cấp trong thư mục gốc.
2. Bao gồm dịch vụ trong AppModule hoặc trong một mô-đun chỉ được AppModule nhập.

Bắt đầu với Angular 6.0, cách ưa thích để tạo một dịch vụ đơn lẻ là chỉ định dịch vụ cần được cung cấp trong thư mục gốc. Điều này được thực hiện bằng cách cài đặt được cung cấp để root trên trang trí @Injectable của dịch vụ:

Chỉ cần khai báo dịch vụ của bạn là nhà cung cấp trong app.module.ts mà thôi.

Nó đã làm công việc cho tôi.

providers: [Topic1Service,Topic2Service,...,TopicNService],

sau đó hoặc kích hoạt nó bằng tham số riêng của hàm tạo:

constructor(private topicService: TopicService) { }

hoặc vì nếu dịch vụ của bạn được sử dụng từ html, tùy chọn -prod sẽ yêu cầu:

Property 'topicService' is private and only accessible within class 'SomeComponent'.

thêm một thành viên cho dịch vụ của bạn và điền nó với thể hiện nhận được trong hàm tạo:

export class SomeComponent {
  topicService: TopicService;
  constructor(private topicService: TopicService) { 
    this.topicService= topicService;
  }
}

1. Nếu bạn muốn tạo dịch vụ đơn ở cấp ứng dụng, bạn nên xác định nó trong app.module.ts

   nhà cung cấp: [MyApplicationService] (bạn cũng có thể định nghĩa tương tự trong mô-đun con để làm cho mô-đun đó cụ thể)

   • Không thêm dịch vụ này trong nhà cung cấp tạo một thể hiện cho thành phần đó phá vỡ khái niệm singleton, chỉ cần tiêm qua hàm tạo.

2. Nếu bạn muốn xác định dịch vụ singleton ở cấp thành phần tạo dịch vụ, hãy thêm dịch vụ đó vào app.module.ts và thêm mảng nhà cung cấp bên trong thành phần cụ thể như được hiển thị bên dưới snipet.

   @Component ({selector: 'app-root', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'], nhà cung cấp: [TestMyService]})

3. Angular 6 cung cấp cách mới để thêm dịch vụ ở cấp ứng dụng. Thay vì thêm một lớp dịch vụ vào mảng nhà cung cấp [] trong AppModule, bạn có thể đặt cấu hình sau trong @Injectable ():

   @Injectable ({cung cấp: 'root'}) lớp xuất khẩu MyService {...}

"Cú pháp mới" cung cấp một lợi thế mặc dù: Dịch vụ có thể được tải một cách lười biếng bởi Angular (đằng sau hậu trường) và mã dự phòng có thể được xóa tự động. Điều này có thể dẫn đến hiệu suất và tốc độ tải tốt hơn - mặc dù điều này thực sự chỉ có tác dụng đối với các dịch vụ và ứng dụng lớn hơn nói chung.

Ngoài những câu trả lời xuất sắc ở trên, có thể còn thiếu một thứ gì khác nếu những thứ trong đĩa đơn của bạn vẫn không hoạt động như một đĩa đơn. Tôi gặp vấn đề khi gọi một hàm công khai trên singleton và thấy rằng nó đang sử dụng các biến sai. Nó chỉ ra rằng vấn đề thislà không được đảm bảo ràng buộc với singleton cho bất kỳ chức năng nào trong singleton. Điều này có thể được sửa chữa bằng cách làm theo lời khuyên ở đây , như vậy:

@Injectable({
  providedIn: 'root',
})
export class SubscriptableService {
  public serviceRequested: Subject<ServiceArgs>;
  public onServiceRequested$: Observable<ServiceArgs>;

  constructor() {
    this.serviceRequested = new Subject<ServiceArgs>();
    this.onServiceRequested$ = this.serviceRequested.asObservable();

    // save context so the singleton pattern is respected
    this.requestService = this.requestService.bind(this);
  }

  public requestService(arg: ServiceArgs) {
    this.serviceRequested.next(arg);
  }
}

Ngoài ra, bạn có thể chỉ cần khai báo các thành viên lớp public staticthay vì public, bối cảnh sẽ không thành vấn đề, nhưng bạn sẽ phải truy cập chúng như SubscriptableService.onServiceRequested$thay vì sử dụng nội xạ phụ thuộc và truy cập chúng qua this.subscriptableService.onServiceRequested$.

Dịch vụ phụ huynh và trẻ em

Tôi đã gặp rắc rối với một dịch vụ cha mẹ và con của nó sử dụng các trường hợp khác nhau. Để buộc một trường hợp được sử dụng, bạn có thể đặt bí danh cho phụ huynh có tham chiếu đến đứa trẻ trong các nhà cung cấp mô-đun ứng dụng của bạn. Phụ huynh sẽ không thể truy cập các thuộc tính của trẻ, nhưng cùng một thể hiện sẽ được sử dụng cho cả hai dịch vụ. https://angular.io/guide/dependency-injection-providers#aliased- class -providers

app.module.ts

providers: [
  ChildService,
  // Alias ParentService w/ reference to ChildService
  { provide: ParentService, useExisting: ChildService}
]

Các dịch vụ được sử dụng bởi các thành phần bên ngoài phạm vi mô-đun ứng dụng của bạn

Khi tạo một thư viện bao gồm một thành phần và một dịch vụ, tôi gặp phải một vấn đề trong đó hai trường hợp sẽ được tạo. Một bởi dự án Angular của tôi và một bởi thành phần bên trong thư viện của tôi. Cách khắc phục:

my-bên ngoài.component.ts

@Component({...})
export class MyOutsideComponent {
  @Input() serviceInstance: MyOutsideService;
  ...
}

my-Inside.component.ts

  constructor(public myService: MyOutsideService) { }

my-Inside.component.hmtl

<app-my-outside [serviceInstance]="myService"></app-my-outside>