Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/delphi/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular2跨模块共享服务,无需精确的导入语句_Angular - Fatal编程技术网

Angular2跨模块共享服务,无需精确的导入语句

Angular2跨模块共享服务,无需精确的导入语句,angular,Angular,最近我爱上了Angular2/4,但目前我正与设计上的第一个主要怀疑作斗争 请考虑下面的共享< /代码>模块,我想导出共享的公共组件(即我的自定义按钮和其他的“原子”构建块组件)和常见的服务< /强>: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {ExampleService } from './services/example.service

最近我爱上了Angular2/4,但目前我正与设计上的第一个主要怀疑作斗争

请考虑下面的<代码>共享< /代码>模块,我想导出共享的公共组件(即我的自定义按钮和其他的“原子”构建块组件)和常见的<强>服务< /强>:

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(因为它是
提供者
数组存在),但即使如此,它仍然必须作为组件中的
导入
语句直接引用:

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();
  }
}
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';
}
虽然公共模块内的组件可以相对容易地引导此服务(因为路径通常很短且连贯,如
/。/services/service\u name
,它们将被放置在相同的
共享
模块文件夹中,但如果我想在父模块中使用此服务,该怎么办? 考虑模块,我们导入定义的公共模块:

//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,这是
ExampleService
它位于这条路径上,通过将其放入
providers
数组,将与共享模块一起分发。”我们定义了以下组件:

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

因此,问题是:如果在一天结束时,你仍然需要用手引导angular并直接指向他,那么为什么还要为
提供者
@可注入
、模块定义和所有这些有点痛苦的事情而烦恼呢?你希望使用什么样的服务?如果我们必须知道我们希望注入的服务的实现(因为我们必须知道.ts服务文件的url)

如果这样的问题在组件中得到了很好的解决(即,我能够在导入模块组件时使用
标记),那么在共享服务的情况下为什么会如此痛苦呢

作为披露,我了解到,大多数文件顶部的模块/管道/服务的导入与角度组件的导入阵列所起的作用完全不同。很抱歉发了这么长的帖子,我只希望我清楚地表达了我的疑问,以证明这一点