Angular2 - Chia sẻ dữ liệu giữa các thành phần sử dụng dịch vụ

Question

Tôi có một đối tượng mà tôi muốn chia sẻ giữa các thành phần của mình với ứng dụng Angular2.

Đây là nguồn gốc của thành phần đầu tiên:

/* app.component.ts */ 

// ...imports 
import {ConfigService} from './config.service'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/app.html', 
    directives: [Grid], 
    providers: [ConfigService] 
}) 
export class AppComponent { 
    public size: number; 
    public square: number; 

    constructor(_configService: ConfigService) { 
     this.size = 16; 
     this.square = Math.sqrt(this.size); 

     // Here I call the service to put my data 
     _configService.setOption('size', this.size); 
     _configService.setOption('square', this.square); 
    } 
} 

và thành phần thứ hai:

/* grid.component.ts */ 

// ...imports 
import {ConfigService} from './config.service'; 

@Component({ 
    selector: 'grid', 
    templateUrl: 'app/templates/grid.html', 
    providers: [ConfigService] 
}) 
export class Grid { 
    public config; 
    public header = []; 

    constructor(_configService: ConfigService) { 
     // issue is here, the _configService.getConfig() get an empty object 
     // but I had filled it just before 
     this.config = _configService.getConfig(); 
    } 
    } 

và cuối cùng là dịch vụ nhỏ của tôi, các ConfigService:

/* config.service.ts */ 

import {Injectable} from 'angular2/core'; 

@Injectable() 
export class ConfigService { 

    private config = {}; 

    setOption(option, value) { 
     this.config[option] = value; 
    } 

    getConfig() { 
     return this.config; 
    } 
} 

Dữ liệu của tôi không được chia sẻ, trong grid.component.ts, dòng _configService.getConfig() trả về một đối tượng trống, bu Nó được điền ngay trước trong app.component.ts.

Tôi đã đọc tài liệu và hướng dẫn, không có gì hiệu quả.

Tôi đang thiếu gì?

Cảm ơn

SOLVED

Vấn đề của tôi là tôi đã được tiêm ConfigService tôi hai lần. Trong bootstrap của ứng dụng và trong tập tin mà tôi đang sử dụng nó.

Tôi đã xóa cài đặt providers và hoạt động của thiết bị!

Answer 1

Bạn xác định nó trong hai thành phần của bạn. Vì vậy, dịch vụ không được chia sẻ. Bạn có một phiên bản cho thành phần AppComponent và một phiên bản khác cho thành phần Grid.

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/templates/app.html', 
    directives: [Grid], 
    providers: [ConfigService] 
}) 
export class AppComponent { 
    (...) 
} 

Các giải pháp nhanh chóng là để loại bỏ các thuộc tính để providers phần lưới của bạn ... Bằng cách này, ví dụ dịch vụ sẽ được chia sẻ bởi các AppComponent và con của nó thành phần.

Giải pháp khác là đăng ký nhà cung cấp tương ứng trong chức năng bootstrap. Trong trường hợp này, cá thể sẽ được chia sẻ bởi toàn bộ ứng dụng.

bootstrap(AppComponent, [ ConfigService ]); 

Để hiểu lý do tại sao bạn cần thực hiện điều đó, bạn cần phải biết tính năng "bộ phân cấp thứ bậc" của Angular2. liên kết sau đây có thể hữu ích:

• What's the best way to inject one service into another in angular 2 (Beta)?
• https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Answer 2

Đừng thêm ConfigService để providers của thành phần của bạn. Điều này dẫn đến các phiên bản mới cho mọi thành phần. Thêm số điện thoại đó vào providers của một thành phần gốc chung. Nếu bạn thêm nó vào thành phần gốc của mình hoặc bootstrap(App, [ConfigService]), toàn bộ ứng dụng của bạn sẽ chia sẻ một cá thể duy nhất.

Answer 3

Đối với phiên bản mới nhất của góc cạnh, nếu bạn muốn chia sẻ dịch vụ, bạn không thể thêm nó vào chức năng khởi động. Chỉ cần thêm nó vào danh sách nhà cung cấp NgModule như bạn sẽ làm với một dịch vụ bình thường, hành vi mặc định của nó sẽ là singleton.

bootstrap (AppComponent);

@NgModule({ 
    declarations: [ 
     .... 
    ], 
    imports: [ 
     ....  
    ], 
    providers: [ 
     ConfigService, 
....