[Angular 2] Share a Service Across Angular 2 Components and Modules

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Services are used to share data between components. They follow a module pattern that allows you to use the data throughout your application so that your data is consistent and in sync.

Create a service.module.ts:

import { NgModule} from '@angular/core';

import {SimpleService} from './simple.service';

@NgModule({

})

export class ServicesModule {

    static forRoot(){

        return {

            ngModule: ServicesModule,

            providers: [SimpleService]

        }

    }

}

export {

    SimpleService

}

Simple.serivce.ts:

import { Injectable } from '@angular/core';

@Injectable()

export class SimpleService {

    message = "Hello";

    constructor() { }

}

app.module.ts:

import { NgModule} from "@angular/core";

import {BrowserModule} from "@angular/platform-browser";

import {AppComponent} from './app.component';

import {HomeModule} from './components/home/home.module';

import {WidgetsModule} from './components/widgets/widgets.module';

import {ServicesModule} from './serivces/service.module';

@NgModule({

    imports:[BrowserModule, HomeModule, WidgetsModule, ServicesModule.forRoot()],

    declarations:[AppComponent],

    bootstrap:[AppComponent]

})

export class AppModule{}

Use the SimpleService:

import { Component, OnInit } from '@angular/core';

import {SimpleService} from '../../serivces/service.module';

@Component({

    moduleId: module.id,

    selector: 'home',

    templateUrl: 'home.component.html'

})

export class HomeComponent implements OnInit {

    constructor(private simpleService: SimpleService) {

        console.log("message:", simpleService.message);

    }

    ngOnInit() { }

}