首页 > 代码库 > [Angular 2] Share a Service Across Angular 2 Components and Modules

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

2024-08-14 02:37:29   211人阅读

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

 

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


联系
我们