Question

我正在使用如下所述的应用程序结构

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);
    }
}

我很想知道是否有任何方法可以参考HeroModule访问HeroService，而不是从Hero单独导入HeroService对象和../hero/index

Answer 1

来自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 {}

Answer 2

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

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

在angular2

2 个答案: