2

我是 Angular 2 的初学者，正在尝试了解如何从功能模块中导出类，并将其导入到我的主模块中。

当我尝试在 typescript 中编译它时，我收到以下两个错误：

  • app/app.component.ts(11,21)：错误 TS2304：找不到名称“AddService”。

  • app/app.module.ts(4,9)：错误 TS2305：模块“C:/angular/app/add/arithmetic.module”没有导出成员“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：

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

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

算术模块.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 { }

添加.service.ts

export class AddService {
    addTwoNumbers(a: number, b: number) : number {
        return a + b;
    } 
}

这真的很令人沮丧，因为

1) 我正在导出 AddService——它被标记为“导出”，并且在 ArithmeticModule 中我使用@NgModule 元数据将其标记为导出。

2) 我正在从我的主模块中导入 [据称] 导出的 AddService 类，因此 AddService 应该是可用的，因为它是从 ArithmeticModule 导出的

如果我直接从组件中导入 AddService，它工作正常，但这不是我想要的：我想从我的主模块导入类，并利用该模块的导出，就像我们对 Angular 的模块所做的那样（例如，BrowserModule 和 FormsModule）。@NgModule 的文档说我们应该能够做到这一点 - 从我的功能模块导入一次，进入我的主模块，然后它可以在整个主模块中使用。

有人可以告诉我我做错了什么吗？还是我误解了应该使用哪些模块？

4

2 回答 2

11

对于服务使用providers: [...]，它们将被添加到根注入器（来自非延迟加载的模块）。

exports: []用于导出指令、组件和管道的指令、组件和管道和模块。

于 2016-09-25T18:09:42.640 回答
2

从这里我可以看到几个错误，

1）如果你想在任何地方都使用AddService，最好将它注入到AppModule中，如下所示，（从算术模块中删除AddService）

 import {AddService} from './add/arithmetic.module';

 @NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent, AddService],
    bootstrap:      [AppComponent],
    providers:      [AddService]          //<<<===here 
})
export class AppModule { }

2）服务应该是可注入的

import {Injectable} from '@angular/core'; //<<<===here

@Injectable()                             //<<<===here
   export class AddService {
    addTwoNumbers(a: number, b: number) : number {
        return a + b;
    } 
   }

3) 如何在app.component.ts中使用

import {AddService} from './add/arithmetic.module';
import { Component } from '@angular/core';    

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    constructor(private s:AddService){}   //<<<===here
    calculate() {

       // var c = new AddService();

        var x = s.addTwoNumbers(3, 5);     //<<<===here
        console.log(x);
    }
}
于 2016-09-25T18:16:45.333 回答