如何使用 angular2 从另一个模块导入服务？答案

【问题标题】：How to import a service from another module using angular2?如何使用 angular2 从另一个模块导入服务？
【发布时间】：2017-06-01 16:14:48
【问题描述】：

我正在尝试将用户从我的 LoginService 获取到配置文件模块。我的个人资料模块有 3 个组件。 Loginservice 位于 AppModule 内的另一个组件中。这是在 login.service.ts 中获取用户的方法：

getCurrentUser() {
    return this._storage.get<User>(this.USER_KEY);
  }// End getCurrentUser ()

这是我的 app.module.ts：

import { SharedModule } from './shared/SharedModule';
import 'hammerjs';

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { FlexLayoutModule } from "@angular/flex-layout/flexbox";

import { LocalStorageModule } from 'angular-2-local-storage';
import { AppComponent } from './app.component';
import { LoginComponent } from './modules/login/login.component';
import { Angular2RoutingModule } from './app.routing';
import { KeysPipe } from './pipes/keys.pipe';
import { AdminComponent } from './modules/admin/admin.component';
import { AdminHomeComponent } from './modules/admin/admin-home/admin-home.component';
import { ProfileComponent } from './modules/profile/profile.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ],
  imports: [
    SharedModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    Angular2RoutingModule,
    MaterialModule.forRoot(),
    FlexLayoutModule,
    LocalStorageModule.withConfig({
      prefix: 'rsm',
      storageType: 'localStorage'
    })
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule { }

这是我的 profile.module.ts：

import { MaterialModule } from '@angular/material';
import { profileRouting } from './profile.routing';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProfileComponent } from './profile.component';
import { ProfileHomeComponent } from './profile-home/profile-home.component';
import { ProfileSecurityComponent } from './profile-security/profile-security.component';
import { ProfileSettingsComponent} from './profile-settings/profile-settings.component';
import { FlexLayoutModule} from '@angular/flex-layout/flexbox';

@NgModule({
    declarations: [
        ProfileComponent,
        ProfileHomeComponent,
        ProfileSecurityComponent,
        ProfileSettingsComponent, 
    ],

    imports: [profileRouting, CommonModule, MaterialModule.forRoot(),FlexLayoutModule],
    providers: [],
})
export class ProfileModule {

}

我如何在 profilemodule 的组件内的 loginservice 中使用该方法？

【问题讨论】：

您是否尝试过在 AppModule 中添加登录服务作为提供者？
angular.io/docs/ts/latest/guide/…
是的。但是当我将登录服务作为提供程序添加到 appModule 中时，它会给出此错误。错误：类型 LoginComponent 是 2 个模块声明的一部分：AppModule 和 ProfileModule！请考虑将 LoginComponent 移至导入 AppModule 和 ProfileModule 的更高模块。您还可以创建一个新的 NgModule，它导出并包含 LoginComponent，然后在 AppModule 和 ProfileModule 中导入该 NgModule。
这是我的错。我在 profilemodule 中导入了 logincomponent。我忘了删除它。 garth74 是正确的。当我在 AppModule 中添加登录服务作为提供程序时，它可以工作。谢谢。

标签： angular

【解决方案1】：

首先将登录与应用程序模块分开。创建登录模块。

现在，因为您想使用来自完全不同模块的东西。您需要导入该模块。

所以，你应该

在配置文件模块中导入登录模块
在配置文件组件中导入登录服务

应该这样做。

这就像导入 HttpModule，然后在使用它们之前导入 Http 服务。

【讨论】：