Angular2跨模块共享服务,无需精确的导入语句
最近我爱上了Angular2/4,但目前我正与设计上的第一个主要怀疑作斗争Angular2跨模块共享服务,无需精确的导入语句,angular,Angular,最近我爱上了Angular2/4,但目前我正与设计上的第一个主要怀疑作斗争 请考虑下面的共享< /代码>模块,我想导出共享的公共组件(即我的自定义按钮和其他的“原子”构建块组件)和常见的服务< /强>: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {ExampleService } from './services/example.service
请考虑下面的<代码>共享< /代码>模块,我想导出共享的公共组件(即我的自定义按钮和其他的“原子”构建块组件)和常见的<强>服务< /强>:
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)
如果这样的问题在组件中得到了很好的解决(即,我能够在导入模块组件时使用
标记),那么在共享服务的情况下为什么会如此痛苦呢
作为披露,我了解到,大多数文件顶部的模块/管道/服务的导入与角度组件的导入阵列所起的作用完全不同。很抱歉发了这么长的帖子,我只希望我清楚地表达了我的疑问,以证明这一点