Question

最近我爱上了Angular2 / 4，但目前我正面临着对设计的第一个主要疑问。

请考虑关注Shared模块，我想导出共享公共组件（即我的自定义按钮和其他“原子”构建块组件）以及常见的服务：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {ExampleService } from './services/example.service';
import { Component1Component } from './component1/component1.component';
@NgModule({
    declarations: [
    Component1Component,
],
    imports: [ CommonModule ],
    exports: [Component1Component],
    providers: [ExampleService],
})
export class SharedModule {}

在这个特定模块中，它的组件（在示例Component1Component中）能够使用ExampleService（因为它是providers数组存在），但即便如此，它仍然必须直接引用为import语句内部成分：

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

import {ExampleService} from './../services/example.service'; //THIS LINE BOTHERS ME    
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

  data: string;

  constructor(private exampleService: ExampleService) { }
  ngOnInit() {
    this.data = this.exampleService.exampleLog();
  }
}

虽然通用模块中的组件可以相对容易地引导此服务（因为路径通常很短且连贯如./../services/service_name，并且它们将被放置在相同的shared模块文件夹中但是如果我想要在父模块中使用此服务？考虑模块，我们将导入已定义的公共模块：

//Angular modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//App modules
import {SharedModule} from './shared/shared.module'; //WE IMPORT DEFINED MODULE WITH SERVICES IN HIS PROVIDERS ARRAY

//App components
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule //IMPORTS ARRAY WITH OUR MODULE
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，我想在AppComponent中使用我的服务。我假设，如果我们导入专用模块来处理服务依赖性（即SharedModule），我们不需要在以后直接服务集成到组件中。但不幸的是，我们甚至认为我们几分钟前就对Angular说：“嘿，Angular，这是ExampleService它位于这个路径的这个路径中，并将通过将其放入providers数组中与共享模块一起分发“。我们定义以下组件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

constructor(private exampleService: ExampleService){} //HERE ALL IDEA CRASHES FOR ME

  title = 'app';
}

Angular无法将ExampleService识别为我们插入SharedModule的服务。我们必须手动添加一个import语句，这个语句可能完全被脱离了上下文（即./../../../shared/services/example.service.ts）。

所以问题是：为什么要打扰providers，@Injectable，模块定义以及所有那些有点痛苦的事情，如果在一天结束时你还需要用手指导角度和直接指出他，你想用什么特别的服务？如果我们必须知道完全实现我们希望注入的服务（因为我们必须知道完全 url到.ts），它如何与所有依赖注入定理配对服务文件）。

如果在组件中非常轻微地解决了这个问题（即我能够在导入模块组件时使用<app-component1></app-component1>标记，为什么在共享服务的情况下它一定是这样的痛苦？

作为披露，我理解最顶层文件的import模块/管道/服务与角度组件的导入数组完全不同。很抱歉很长的帖子，我只是希望我表达了我的怀疑，足以说明理由。

Angular2跨模块共享服务，没有完全导入语句

0 个答案: