Angular2-找不到服务提供者

Question

我在应用程序中定义了3个组件。 AppComponent，MainComponent和TextComponent。

AppComponent包含MainComponent如下。 请注意，提供者属性中包含两个服务，CommonEventsService，CommonProductEventsService

@Component({
  selector: 'my-app',
  template: `
    <my-main></my-main>
  `,
  providers: [CommonEventsService, CommonProductEventsService],
  directives: [ROUTER_DIRECTIVES, MainComponent]
})
export class AppComponent implements OnInit, OnDestroy  {...}

主要组件包含在AppComponent的指令属性中。 主要组件定义如下：

@Component({
  template: "<my-add-text></my-add-text>",
  selector: "my-main",
  directives: [TextComponent]
})
export class MainComponent implements OnInit, OnDestroy {...}

请注意，我在上面的指令属性中包含了TextComponent。 TextComponent的定义如下：

@Component({
  selector: "my-add-text",
  templateUrl: "/app/scripts/components/add/text.component.html",
})
export class TextComponent {
 constructor(private commonProductEvents: CommonProductEventsService){}
}

问题是，在加载应用程序时，出现以下错误。

EXCEPTION: No provider for CommonProductEventsService! (TextComponent ->   CommonProductEventsService) in [addText in MainComponent@41:13]

但是我已经在AppComponent中注册了CommonProductEventsService。 那我为什么会收到这个错误？

Answer 1

无法复制。 请参阅工作柱塞 。

你有

CommonEventsService
CommonProductEventsService 

在与组件相同的文件中，但在文件的下面？

然后，您需要向上移动它们，使用forwardRef或将它们移动到单独的文件中并导入它们。

也可以看看
-https : //angular.io/docs/ts/latest/api/core/forwardRef-function.html-http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular -2.html