Question

看起来共享服务是解决许多情况的最佳实践，例如组件之间的通信或替换角度1的旧$ rootscopecope概念。我正在尝试创建我的，但它不起作用。有帮助吗？ ty !!!

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）中的那个。

这是因为＆＃34;分层注射器＆＃34; 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) {

    }
}

我希望这对你有用。

Answer 3

除了您的要求及其解决方案外，您还可以考虑使用Facade +共享服务。我在这里有一个小项目：https://github.com/cmandamiento/angular-architecture-base

Angular 2 - 使用共享服务

3 个答案: