角度2-创建了多个服务实例

Question

我创建了AngularJS 2服务，并在2个不同的组件中使用它：App-Component和Sub-Component。我的服务的每个输出属性“ log”（字符串）。

StateService类：

@Injectable ()
class StateService {

    public log : string;
    static count : number = 0;

    constructor () {
        this.log = '';
        StateService.count++;
        this.writeToLog ('CREATED '+StateService.count+' at ' + new Date().toString());
    }

    public writeToLog (text : string) : void {
        this.log += text + '\n';
    }
}  

Component：

@Component ({
    selector : 'Sub-Component',
    template : `<hr>
            This is the Sub-Component !
            <BR>
            StateService Log : 
            <pre>{{ _stateService.log }}</pre>
            <button (click)="WriteToLog ()">Write to log</button>
            `,
    providers : [StateService]
})

export class SubComponent {
    constructor (private _stateService : StateService) {
    }

    public WriteToLog () : void {
        this._stateService.writeToLog ('From Sub-Component - This is '+new Date().toString());
    }
}

代码here的实时示例

除了服务被创建一次，当每个组件调用WriteToLog方法时，每个组件的输出都是相同的，但是不是。

输出示例：

App-Component可以输出以下内容：

实例1-创建于2016年1月21日星期四11:43:51

来自应用程序组件-这是2016年1月21日，星期四

来自应用程序组件-这是2016年1月21日，星期四

子组件可以输出此内容：

实例2-创建于2016年1月21日星期四11:43:51

来自子组件-这是2016年1月21日，星期四

来自子组件-这是2016年1月21日，星期四

因此似乎已创建2个服务实例（实例1 +实例2）

我只想要一个实例；），当我在日志中附加字符串时，它必须同时出现在两个组件中。

谢谢您的帮助

Answer 1

更新Angular> = 2.0.0-RC.6

不要将服务添加到组件的提供者。而是将其添加到

@NgModule({ providers: [...], ...

（（由于not延迟加载的模块，因为延迟加载的模块引入了自己的作用域）] >>

@Component ({
    selector : 'Sub-Component',
    template : `<hr>
            This is the Sub-Component !
            <BR>
            StateService Log : 
            <pre>{{ _stateService.log }}</pre>
            <button (click)="WriteToLog ()">Write to log</button>
            `,
    // providers : [StateService] <== remove
})
Angular <= 2.0.0-RC.5

如果将其添加到组件上，则会为每个组件实例获得一个新的服务实例。而是将其添加到

bootstrap(AppComponent, [StateService]);
您可以通过将其添加到单个组件中来获得更细粒度的控制，然后此组件和所有子代都将注入相同的实例，否则，该应用程序将使用bootstrap()创建的实例。这是Angulars DI中的“分层”。

另请参见-http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html-http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

Answer 2

除了Günter的一个很好的答案之外，此链接可能还会提供有关Angular2的分层依赖注入如何工作的更多详细信息：