angular - How can i get data service in different components? -

sorry english if it's bad, i'm russia. want ask you. me please guys. have service in angular 4 , how can manage in many components?

this service:

import {eventemitter, injectable} '@angular/core';  @injectable() export class authservice {     status: boolean = false;     userauth: eventemitter<boolean> = new eventemitter();     auth() {       this.status = true;       this.userauth.emit(this.getauth());     }     logout() {       this.status = false;       this.userauth.emit(this.getauth())     }     getauth() {       return this.status;     } } 

this first component. have subscribed service in ngoninit

import {component, oninit} '@angular/core'; import {apiservice} "../../service/api/api.service"; import {blockui, ngblockui} 'ng-block-ui' import {authservice} "../../service/auth/auth.service";  @component({     selector: 'app-header',     templateurl: './header.component.html',     styleurls: ['./header.component.less'],     providers: [apiservice, authservice] }) export class headercomponent implements oninit {     islogin: boolean = false;     @blockui() blockui: ngblockui;     constructor(private as: apiservice, public authservice: authservice) {       this.blockui.start();       this.as.islogin().then((res) => {         if (res.haserror()) return false;         if (res.getresponse().login) this.authservice.auth();         if (!res.getresponse().login) this.authservice.logout();         // this.islogin = this.authservice.getauth();         this.blockui.stop();       });     }     ngoninit() {       this.authservice.userauth.subscribe((status) => {         this.islogin = status;         console.log('status', status);         console.log('this.islogin', this.islogin);       })     }     logout() {       this.as.logout().then((res) => {         if (res.haserror()) return false;         this.authservice.logout();         // this.islogin = this.authservice.getauth();       });     } } 

but if call service in component it'll call new service.

import {component, eventemitter, oninit, output} '@angular/core'; import {formbuilder, formgroup, validators} "@angular/forms" import {apiservice} "../../service/api/api.service"; import {authservice} "../../service/auth/auth.service";  @component({   selector: 'app-login',   templateurl: './login.component.html',   styleurls: ['./login.component.less'],   providers: [apiservice, authservice] }) export class logincomponent {   formlogin: formgroup;    constructor(private fb: formbuilder, private as: apiservice, public authservice: authservice) {     this.formlogin = fb.group({       email: [null, validators.compose([validators.required, validators.pattern(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-za-z\-0-9]+\.)+[a-za-z]{2,}))$/)])],       password: [null, validators.compose([validators.required, validators.minlength(6)])]     });   }    auth(form) {     this.as.authuser(form).then(res => {       if (res.haserror()) return false;       this.formlogin.reset();       this.authservice.auth();     });   } } 

for each component you're receiving new instance of authservice because provided authservice class in both components providers.

angular2 dependency injection (di) works more or less in following way:

• every component has injector , providers
• when ask di provide instance of checks in providers and, if finds "recipe" there, creates instance, puts in injector , provides requested
• if doesn't find "recipe" in providers , instance in injector, same request lifted father in turn check in providers "recipe" or in injector existing instance
• when, going in hierarchical chain (up main module), finds provider requested token, instance created , returned requested
• from point, children of component have injector request instance, receive instance singleton.

so, going specific issue, you're receiving 2 diffent instances of authservice because both components contain "recipe", both of them create instance, save in injector , return when requested di.

to solve problem can:

• remove each component's decorator metadata provider authservice
• add authservice providers in module decorator metadata.

__

@component({     selector: 'app-header',     templateurl: './header.component.html',     styleurls: ['./header.component.less'],     providers: [apiservice] }) export class headercomponent implements oninit { /* ... */ } 

__

@component({     selector: 'app-login',     templateurl: './login.component.html',     styleurls: ['./login.component.less'],     providers: [apiservice] }) export class logincomponent { /* ... */ } 

and in main module declaration

@ngmodule({     imports: [ /* ... */ ],     declarations: [ /* ... */ ],     providers: [authservice, otherservices], })