Angular 如何在不同的组件中获得数据服务？

对不起，我的英语很差，我来自俄罗斯。我想问问你。请帮帮我，伙计们。 我有angular 4中的服务，如何在许多组件中管理它

这是我的服务：

import {EventEmitter, Injectable} from '@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;
    }
}

但是，如果调用另一个组件中的服务，它将调用新的服务

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms"
import {ApiService} from "../../service/api/api.service";
import {AuthService} from "../../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();
    });
  }
}

从'@angular/core'导入{Component，EventEmitter，OnInit，Output}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}
从“../../service/api/api.service”导入{ApiService}”；
从“../../service/auth/auth.service”导入{AuthService}”；
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.less']，
提供者：[ApiService，AuthService]
})
导出类登录组件{
formLogin:FormGroup；
构造函数（私有fb:FormBuilder、私有as:ApiService、公共authService:authService）{
this.formLogin=fb.group({
电子邮件：[null，Validators.compose（[Validators.required，Validators.pattern（/^（[^（）\[\]\，；：\s@\[\]\\，；：\s@']+*）组合（[Validators.required，Validators.pattern（/^）（[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]+]1,3}.[0-9]+]，
密码：[null，Validators.compose（[Validators.required，Validators.minLength（6）]）]
});
}
认证（表格）{
this.as.authUser（form）.then（res=>{
if（res.hasError（））返回false；
这个.formLogin.reset（）；
this.authService.auth（）；
});
}
}

您需要将其添加到主模块中，因为angular创建了单例服务对象，如果您在组件级别提供服务，那么服务实例将仅特定于您的特定组件，但是您不能在组件之间共享服务数据。因此，您需要在主模块中提供它，以便在组件之间共享

从

@Component

中删除服务提供者，然后只将服务注入

组件的
构造函数中

providers: [AuthService],

Your ng module should be like:

@NgModule({
      declarations: [
        AppComponent,
        LoginComponent,
        HeaderComponent,
     ],
      imports: [
        BrowserModule,
        RoutingModule
      ],
      providers: [AuthService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

对于每个组件，您都会收到一个新的AuthService实例，因为您在两个组件提供程序中都提供了AuthService类

Angular2依赖项注入（DI）的工作方式大致如下：


每个组件都有其注入器和提供者
当您要求DI向您提供某事物的实例时，它会在其提供程序中进行检查，如果在那里找到“配方”，它会创建一个实例，将其放入注入器中，并根据请求提供它
如果它在其提供程序中没有找到“配方”，在其注入器中也没有找到实例，则会将相同的请求提升到其父级，然后父级将在其提供程序中检查“配方”，或在其注入器中检查现有实例
当它在这个层次链中（一直到主模块）找到请求令牌的提供者时，实例将被创建并按请求返回
从那时起，具有请求实例的注入器的组件的所有子组件都将以单例的形式接收该实例

因此，回到您的特定问题，您将收到两个不同的AuthService实例，因为这两个组件都包含其“配方”，所以它们都创建一个实例，保存在注入器中，并在DI请求时返回

要解决您的问题，您可以：


从每个组件的装饰器元数据中删除AuthService的提供程序
将AuthService添加到模块装饰器元数据中的提供程序

__

__

在主模块声明中

@NgModule({
    imports: [ /* ... */ ],
    declarations: [ /* ... */ ],
    providers: [AuthService, OtherServices],
})

将您的服务添加到NgModule的提供者阵列，而不是组件。是的，它帮助了我。非常感谢你：）看看这个答案-
@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 { /* ... */ }

@NgModule({
    imports: [ /* ... */ ],
    declarations: [ /* ... */ ],
    providers: [AuthService, OtherServices],
})