2016-09-02 48 views
7

Trong Góc 1 Tôi thường xuyên sử dụng các nhà máy cho các dịch vụ lưu trữ trạng thái chia sẻ có thể truy cập được bởi nhiều thành phần. Dường như trong Angular 2 tất cả các dịch vụ được tiêm dưới dạng @Injectable() được tạo ra mỗi lần, do đó làm mất trạng thái chia sẻ.Góc 2 - Dịch vụ Singleton?

Tôi 'đăng ký' dịch vụ tại khóa meta của mô-đun gốc providers, nhưng tôi vẫn nhận được phiên bản tạm thời.

Những gì tôi có:

Injectable() 
export class ArtistService { 
    constructor(private http:Http) { 
    // firing on each injection 
    console.log("ArtistService ctor"); 
    } 

} 

gọi nó trong một thành phần thì:

@Component({ 
    selector: 'artist-display', 
    templateUrl: './artistDisplay.html', 
}) 
export class ArtistDisplay { 
    constructor(private artistService: ArtistService) { 
      // instance is fine but transient 
    } 
} 

Và định nghĩa của mô-đun:

@NgModule({ 
    declarations: [...], 
    imports: [BrowserModule, FormsModule, HttpModule, 
    RouterModule.forRoot(rootRouterConfig)], 
    providers : [ 
     ArtistService, 

     // make sure you use this for Hash Urls rather than HTML 5 routing 
     { provide: LocationStrategy, useClass: HashLocationStrategy }, 
    ], 
    bootstrap: [AppComponent] 
}) 

Tôi nghi ngờ có thể một số là cách khác để 'đăng ký' ArtistService để nó vẫn được nạp như một thể hiện tĩnh? Có thể thông qua DI hoặc là cần thiết để tạo ra một phương pháp dụ tĩnh bằng tay?

Cập nhật:
Hóa ra rằng mã trên không làm việc. Tôi đã tìm kiếm sai địa điểm cùng với lỗi logic khiến dữ liệu không được lưu vào bộ nhớ cache chính xác.

Mã trên hoạt động và chỉ định dịch vụ trong phần providers của cấp cao nhất AppModule là chìa khóa để làm cho tham chiếu gốc được tải trong suốt thời hạn của AppComponent. có hiệu quả trong thời gian tải của ứng dụng cung cấp ví dụ Singleton.

Để có được một trường hợp thoáng bạn có thể khai báo thẻ meta providers và tên dịch vụ trên thành phần thực tế mà sau đó sẽ tạo ra các dịch vụ bất cứ khi nào các thành phần được nạp/tái nạp.

Trả lời

3

Điều bạn đã thể hiện là một cách chính xác. Nó tạo ra một cá thể đơn lẻ sẽ được chia sẻ giữa các thành phần.

https://plnkr.co/edit/FBCa39YC4ZPoy6y8OZQl?p=preview cho mục đích tham khảo.

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './app.component'; 
import {service} from './service'; 
@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent], 
    providers:[service], 

    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 
+6

Hmmm ... nó không hoạt động đối với tôi. Nhà xây dựng dịch vụ kích hoạt trên mỗi lần tiêm vào 'ArtistDisplayComponent'. –

+0

xem tôi đã thêm liên kết hoạt động hiển thị dịch vụ được chia sẻ. – micronyks

+0

Ok tôi kiểm tra lại và nó thực sự hoạt động. Lỗi nhà điều hành trên một phần của tôi - Tôi đã nhìn nhầm console.log() :-) –

3

Tôi cũng muốn tạo đối tượng để sử dụng làm nhà cung cấp trong angular2 vì vậy tôi đã tạo @injector. nhưng nếu chúng tôi đặt nhà cung cấp trong mỗi @ thành phần và nhập nó, thì mỗi thành phần sử dụng đối tượng khác nhau của bộ phun. để tạo nhà cung cấp singleton, tôi đã khai báo nhà cung cấp này trong thành phần chính và nhập nó vào mỗi thành phần, bây giờ nó hoạt động tốt. https://angular.io/guide/dependency-injection

+2

Gợi ý: tôi đọc câu trả lời của bạn ba lần và tôi vẫn không chắc chắn những gì bạn cố gắng giao tiếp. Nếu tiếng Anh không phải là ngôn ngữ đầu tiên của bạn: hãy tìm đối tượng Subject Verb Object ngắn. Tập trung vào việc viết văn bản có thể đọc được! – GhostCat

1

Ok hãy để tôi cố gắng giải thích cách dịch vụ hoạt động theo kinh nghiệm của tôi và về cơ bản đến tài liệu.

Có 3 kịch bản chính:

  • Dịch vụ này được bao gồm trong các nhà cung cấp mảng về mặt kĩ thành phần - dịch vụ có thể được tiêm trong các phụ huynh và tất cả trẻ em.

  • Dịch vụ được bao gồm trong mảng nhà cung cấp ở cấp mô-đun - mọi thứ trong mô-đun này đều biết về dịch vụ.

  • Dịch vụ được bao gồm trong mảng nhà cung cấp ở cấp mô-đun - mọi thứ trong mô-đun này đều biết về dịch vụ nhưng nếu bạn sử dụng thành phần từ mô-đun này bên trong thành phần khác từ mô-đun khác. dịch vụ cho thành phần này sẽ khác nhau.

+0

bạn cứu tôi! Tôi có component1 không được tiêm dịch vụ và component2 được tiêm dịch vụ. và tôi không nhận được singleton cho đến khi tôi xóa dịch vụ khỏi nhà cung cấp component2. cảm tạ!!! – praHoc

1

Một dịch vụ Singleton chỉ được giữ trong app.module.ts "nhà cung cấp" (mảng)

và nó sẽ không được đặt trong bất kỳ thành phần hoặc cung cấp dịch vụ khác (mảng).

nếu điều này được thực hiện đúng thì góc 2 - 2.4.0 - Singleton hoạt động hoàn hảo

Các vấn đề liên quan