什么是跨模块共享服务angular2

的最佳方式我正在使用的应用程序结构如下什么是跨模块共享服务angular2

index.ts 
|-app.module.ts 
|-app.component.ts 
|--hero (directory) 
    |-hero.module.ts 
    |-hero.ts (Data Object) 
    |-hero.service.ts 
    |-hero.component.ts 
    |-index.ts (this file exports data obj, service, component & module) 
|--dashboard (directory) 
    |-dashboard.module.ts 
    |-dashboard.component.ts 
    |-index.ts (this file exports module and component)

提到我想在仪表板组件使用英雄的服务。下面是我现在正在使用的代码片段，并按预期工作。但不知道这是否是一种好的做法。

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

import { Hero, HeroService } from '../hero/index'; 
import {Router} from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-dashboard', 
    templateUrl: 'dashboard.component.html', 
    styleUrls: ['dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 
    heroes: Hero[] = []; 

    constructor(private heroService: HeroService, private router: Router) { } 

    ngOnInit(): void { 
     this.heroService.getHeroes() 
      .then(heroes => this.heroes = heroes.slice(1, 5)); 
    } 

    gotoDetail(hero: Hero): void { 
     let link = ['/detail', hero.id]; 
     this.router.navigate(link); 
    } 
}

我很好奇，想知道是否有任何方式，我可以参考访问HeroService到HeroModule而不是分别从../hero/index进口Hero对象和HeroService

来源

2016-08-25 Mahesh

其中一个建议是移动hero.service.ts共享包，但我不希望使用这种方法在逻辑上此服务属于英雄包，只有某一部分的它需要在一些其他包中提到。 – Mahesh

导入是一种TypeScript功能，与Angular无关。如果你想在你的代码中使用类作为类型，你必须导入它（带或不带Angular2）。 'NgModule'中的'imports：[]'实现了完全不同的目的，而**是** Angular2特性。 –

一个非常类似的问题后，你应该引导你在正确的方向：http://stackoverflow.com/questions/39621398/angular2-import-components-services-from-module – cmaynard

服务是整个应用程序共享，因此，如果你把它放到一个模块中，其他组件就可以访问它。但是，您仍然需要在使用它们的组件中导入类Hero和HeroService。

导入类和模块的顶部只是一个不同的目的。

来源

2016-08-26 06:40:55

这基本上是真实的，但惰性加载模块是一个例外。你需要实现'forRoot（）'并在那里提供服务使它们全局可用。 –

从Range.io

到目前为止，我们的问题是，我们在不同层次的的DI树创建相同服务的两个实例。在树的下部分支中创建的实例是，它在根级别上定义了一个实例。解决方案？为了避免在DI树的较低级别为延迟加载的模块创建第二个实例，并仅使用在树的根上注册的服务实例。

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { CounterService } from './counter.service'; 

@NgModule({}) 
export class SharedModule { 
    static forRoot(): ModuleWithProviders { 
    return { 
     ngModule: SharedModule, 
     providers: [CounterService] 
    }; 
    } 
}

有了这个设置，我们可以在我们的根模块的AppModule调用forRoot方法注册模块和服务导入此模块。

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

@NgModule({ 
    imports: [ 
    SharedModule.forRoot(), 
    ... 
    ], 
    ... 
}) 
export class AppModule {}

来源

2017-09-15 15:41:42 LeonardoX

这是伟大而优雅的解决方案！ – Mehdi

我同意！优雅的解决方案 –

在所有其他延迟加载的模块中：只需使用模块名称直接导入服务。而不是* SharedService.forRoot（）*只是使用* SharedService *。 –

什么是跨模块共享服务angular2

回答

相关问题