Angular2 nhà cung cấp dịch vụ toàn cầu

Question

/app 
     - app.component.ts 
     - app.component.html (hide/show: menu bar) 
     - app.global.service.ts (Public varible LoginSuccess:boolean) 
     - main.ts 
     /student 
      - student.ts 
      - student.service.ts 
      - student.component.ts 
      - student.component.html 
     /security 
      - login.component.ts (LoginSuccess = true) 
      - login.component.html 

Trong ứng dụng Angular2, tôi có một nhu cầu đơn giản nơi tôi muốn hiển thị thanh menu ẩn dựa trên thành công đăng nhập. Đối với điều đó tôi tạo ra một dịch vụ mà chỉ có một boolean LoginSuccess varilable, mà tôi sẽ thiết lập thành phần đăng nhập và sẽ sử dụng trên app.component.html cho [hidden]=LoginSuccess nav tag.

Vấn đề tôi đang phải đối mặt là, ngay cả sau khi tiêm app.global.service.ts thru constructor giá trị app.component.ts & login.component.ts không được sự bền bỉ và mỗi constructor tạo ra đối tượng mới của app.global.service.ts.

Câu hỏi: Làm thế nào tôi có thể đạt được để duy trì giá trị đơn trên ứng dụng thông qua dịch vụ. Một nơi nào đó trong tài liệu Angular2, tôi đã đọc rằng dịch vụ Injectable là singleton.

Answer 1

Bạn nên cung cấp GlobalService tại bootstrap, và không cho từng thành phần:

bootstrap(AppComponent, [GlobalService]) 

@Component({ 
    providers: [], // yes 
    // providers: [GlobalService], // NO. 
}) 
class AppComponent { 
    constructor(private gs: GlobalService) { 
    // gs is instance of GlobalService created at bootstrap 
    } 
} 

này cách GlobalService sẽ là một singleton.

Để có cách tiếp cận nâng cao hơn, hãy xem this answer.

Answer 2

Như Saxsa, điểm mấu chốt là xác định nhà cung cấp dịch vụ của bạn trong bộ phun ứng dụng chứ không phải ở mỗi cấp thành phần. Hãy cẩn thận không xác định nhà cung cấp dịch vụ hai lần ... Nếu không, bạn vẫn sẽ có các phiên bản dịch vụ riêng biệt.

Bằng cách này, bạn sẽ có thể chia sẻ cùng một phiên bản dịch vụ.

Hành vi này xảy ra do bộ phun thứ bậc của Angular2. Để biết thêm chi tiết, bạn có thể có một cái nhìn tại câu hỏi này:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

Tính đến phiên bản cuối cùng (góc 2.0.0):

nhập dịch vụ và tiêm nó trong những nhà cung cấp mảng như vậy:

import { GlobalService } from './app.global.service'; 

//further down: 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
    // Your components should go here 
    ], 
    imports: [ 
    // Your module imports should go here 
    ], 
    providers: [ 
    ENV_PROVIDERS // By Angular 
    // Your providers should go here, i.e. 
    GlobalService 
    ] 
}); 

Answer 4

Bạn nên có một app.component.ts và thay vì boostrapping bên trong app.module.ts bạn tiêm dịch vụ vào app.component.ts.

... 
import { MusicService } from './Services/music-service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    providers: [MusicService], 
    ... 
}) 
export class AppComponent { 

constructor(private MS: MusicService) { 

} 
... 

Điều này được dựa trên hiện tại Angular2 xây dựng. Vì vậy, bên trong index.html bạn phải có <app-root> trong đó AppComponent được tải.

Bây giờ sử dụng nó bên trong bất kỳ sử dụng thành phần khác chỉ import nó:

import { MusicService } from './Services/music-service'; 

và khởi tạo nó:

constructor(private MS: MusicService) { 

} 

Tóm tắt:

1. nhập vào app.component.ts
2. Insert vào app.component.ts là một provider
3. Initialize trong constructor
4. Lặp lại bước 2,3 cho mỗi lần sử dụng thành phần khác muốn sử dụng nó trong

tham khảo: Angular Dependency Injection

Answer 5

tôi sẽ chỉ cần thêm, bởi vì tôi đã bị mắc kẹt tại đây chỉ đến, mặc dù tôi đã sử dụng Singelton, bạn cũng phải sử dụng chiến lược định tuyến Góc:

Bạn không thể sử dụng href = "../ my-route"

nguyên nhân này bắt đầu toàn bộ ứng dụng mới:

thay vào đó bạn phải sử dụng: routerLink = "../ my-đường"