Angular 2 - Использование общего сервиса

Question

Похоже, что общие сервисы - это лучшая практика для решения многих ситуаций, таких как обмен данными между компонентами или замена старой концепции $ rootcope Angular 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 "иерархические инжекторы". Для более подробной информации смотрите этот вопрос:

• Какой лучший способ внедрить одну услугу в другую в angular 2 (бета)?

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) {

    }
}

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

Answer 3

В дополнение к вашим требованиям и их решению вы можете рассмотреть возможность использования Facade + Shared Services. У меня здесь небольшой проект: https://github.com/cmandamiento/angular-architecture-base