Угловая 2 - Использование общей службы

Question

Похоже, что общие сервисы - это наилучшая практика для решения многих ситуаций, таких как связь между компонентами или замена старой концепции $ anchor углового 1. Я пытаюсь создать свою, но это не за работой. Любая помощь ? ты !!!

app.component.ts

import {Component} from 'angular2/core'; 
import {OtherComponent} from './other.component'; 
import {SharedService} from './services/shared.service'; 
@Component({ 
selector: 'my-app', 
providers: [SharedService], 
directives: [OtherComponent], 
template: ` 
    <button (click)="setSharedValue()">Add value to Shared Service</button> 
    <br><br> 
    <other></other> 
` 
}) 
export class AppComponent { 
data: string = 'Testing data'; 
setSharedValue(){ 
    this._sharedService.insertData(this.data); 
    this.data = ''; 
    console.log('Data sent'); 
} 
constructor(private _sharedService: SharedService){} 
} 

other.component.ts

import {Component, OnInit} from "angular2/core"; 
import {SharedService} from './services/shared.service'; 
@Component({ 
selector : "other", 
providers : [SharedService], 
template : ` 
I'm the other component. The shared data is: {{data}} 
`, 
}) 
export class OtherComponent implements OnInit{ 
data: string[] = []; 
constructor(private _sharedService: SharedService){} 
ngOnInit():any { 
    this.data = this._sharedService.dataArray; 
} 
} 

Answer 1

Большинство времени, вам нужно определить ваши общие службы, когда развернув приложение:

bootstrap(AppComponent, [ SharedService ]); 

и не определяя его снова в атрибуте providers ваших компонентов. Таким образом, у вас будет один экземпляр службы для всего приложения.

---

В вашем случае, поскольку OtherComponent является суб компонент вашего AppComponent один, просто удалите атрибут providers так:

@Component({ 
    selector : "other", 
    // providers : [SharedService], <---- 
    template : ` 
    I'm the other component. The shared data is: {{data}} 
    `, 
}) 
export class OtherComponent implements OnInit{ 
    (...) 
} 

Таким образом, они будут совместно один и тот же экземпляр службы для обоих компоненты. OtherComponent будет использовать один из родительского компонента (AppComponent).

Это из-за функции «иерархических форсунок» для Angular2. Для получения более подробной информации см этот вопрос:

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

Answer 2

Вам нужно добавить глобальный провайдер в модуле, то вам не нужно, чтобы добавить этот провайдер в каждом компоненте. попробуйте это

app.module.ts

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule], 
    declarations: [AppComponent, LoginComponent, InComponent], 
    providers: [LoginService], 
    bootstrap: [AppComponent] 
}) 

app.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    constructor(public loginService: LoginService) { 

    } 
} 

login.component.ts

@Component({ 
    moduleId: module.id, 
    selector: 'login', 
    templateUrl: './login.component.html' 
}) 
export class LoginComponent { 

    constructor(public loginService: LoginService) { 

    } 
} 

Я надеюсь, что эта работа для вас.