Question

假设这是我的app.module.ts文件：

 @NgModule({
  declarations: [
    AppComponent,
    Comp1,
    Comp2,
    Comp3
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [Service],
  bootstrap: [AppComponent]
})
export class AppModule { }

我们还要说AppComponent的模板是：

<comp1></comp1>
<comp2></comp2>

如您所见，我有一个主要组件AppComponent。它包含两个子组件Comp1和Comp2，我想将Comp1注入应用程序的Service。我该怎么办？

Answer 1

您 cannot 这样做，我真的不明白为什么要将Component注入服务。应该是另一种方式。

如果您真的想要在组件1中使用该服务，您可以简单地引用该服务并在其中使用它。

在 Component1.ts

内

import {Service1} from './services/Service1';   

 constructor(private myService: Service1) {
 }

Answer 2

正如Sajeetharan所说，不，你不能这样做，我认为你不想实际将一个组件注入服务（但是你可以将一个或多个服务注入另一个服务）。

在您的示例中<comp1>和<comp2>可以在app.component视图模板中使用，而无需将comp1和comp2注入app.component，只是因为因为组件在视图模板上被引用，并不意味着他们需要注入视图模板引用它们的组件。

为了引用app.component视图模板中的组件，angular需要能够编译视图模板并解析所有引用的组件。它通过遍历已注册的模块并查看模块中定义的声明和导出集合来实现。

因此，您当前的app.module定义为：

...
  declarations: [
    AppComponent,
    Comp1,
    Comp2,
    Comp3
  ],
...

AppComponent视图模板可以在其视图模板中使用Comp1，Comp2和/或Comp3，因为它们都在同一个NgModule中声明。组件定义不需要更改代码以便于此类使用。

Angular 2：是否可以将一个组件注入服务？

2 个答案: