从Angular2模块导出时遇到问题 [英] Having trouble exporting from an Angular2 module
问题描述
我是Angular 2的初学者，并且试图了解如何从功能模块中导出类，并将其导入到我的主模块中.
I'm a beginner with Angular 2, and am trying to understand how to export a class from a feature module, and import it into my main module.
当我尝试在打字稿中进行编译时，收到以下两个错误:
When I try to compile this in typescript, I receive the following two errors:
-
app/app.component.ts(11,21):错误TS2304:找不到名称 "AddService".
app/app.component.ts(11,21): error TS2304: Cannot find name 'AddService'.
app/app.module.ts(4,9):错误TS2305:模块 '"C:/angular/app/add/arithmetic.module"'没有导出的成员 "AddService".
app/app.module.ts(4,9): error TS2305: Module '"C:/angular/app/add/arithmetic.module"' has no exported member 'AddService'.
我的树很简单:
/
index.html
package.json
systemjs.config.js
tsconfig.json
typings.json
app/
app.component.html
app.component.ts
app.module.ts
main.ts
add/
add.service.ts
arithmetic.module.ts
有趣的部分如下:
app.module.ts:
app.module.ts:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
// this next line generates an error from typescript compiler:
// app/app.module.ts(4,9): error TS2305: Module
// '"C:/angular/app/add/arithmetic.module"' has no exported
// member 'AddService'.
import {AddService} from './add/arithmetic.module';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, AddService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
calculate() {
// this next line generates the error:
// app/app.component.ts(11,21):
// error TS2304: Cannot find name 'AddService'.
var c = new AddService();
var x = c.addTwoNumbers(3, 5);
console.log(x);
}
}
arithmetic.module.ts
arithmetic.module.ts
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AddService} from './add.service';
@NgModule({
imports: [CommonModule],
exports: [AddService]
})
export default class ArithemeticModule { }
add.service.ts
add.service.ts
export class AddService {
addTwoNumbers(a: number, b: number) : number {
return a + b;
}
}
这真的令人沮丧，因为
1)我正在导出AddService-将其标记为"export"，并使用@NgModule元数据从ArithmeticModule中将其标记为已导出.
1) I'm exporting AddService -- it's marked as 'export' and from within ArithmeticModule I'm marking it as exported using the @NgModule metadata.
2)我正在从我的主模块中导入[应该]导出的AddService类，因此AddService应该可用，因为它是从ArithmeticModule导出的
2) I'm importing the [allegedly] exported AddService class from within my main module, so the AddService should be usable since it's exported from the ArithmeticModule
如果我直接从组件内部导入AddService，则效果很好，但这不是我要的目的:我想从我的主模块中导入类，并利用该模块中的导出内容，就像我们所做的那样用于Angular的模块(例如BrowserModule和FormsModule). @NgModule的文档说，我们应该能够做到这一点-从功能模块一次导入到我的主模块中，然后就可以在整个主模块中使用了.
It works fine if I import the AddService directly from within the component, but that's not what I'm going for: I want to import the class from my main module, and utilize the exports from that module, just like we do for Angular's modules (e.g., BrowserModule and FormsModule). The documentation for @NgModule says that we should be able to do just that - import once from my feature module, into my main module, and then it's usable throughout the main module.
有人可以告诉我我做错了什么吗?还是我误会了应该使用什么模块?
Can someone tell me what I'm doing wrong? Or am I misunderstanding what modules are supposed to be used for?
推荐答案
对于使用providers: [...]的服务，它们将被添加到根注入器(从非延迟加载的模块).
For services use providers: [...], they will be added to the root injector (from non-lazy-loaded modules).
exports: []用于指令，组件和管道以及导出指令，组件和管道的模块.
exports: [] is for directives, components, and pipes and modules that export directives, components, and pipes.
这篇关于从Angular2模块导出时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
