我们如何避免每次实例化递归组件时调用服务

Question

以下是一个在提供程序中具有FormService的典型组件：

@Component({
selector: "app-block",
templateUrl: "./block.component.html",
styles: ['.block_children { padding-left: 50px;}'],
providers: [FormService]
})
export class BlockComponent {
constructor(@Host() public formService: FormService) {}
@Input() form: any;
getType(form: any) {
console.log(typeof form);
}
}

如果应用程序递归地构建组件，它总是创建FormService的新实例。如何避免这种情况？

<app-block [form]="form" *ngFor="let form of formService.roots()"></app-block>

Answer 1

所以，如果我错了，请纠正我，但angular应该为你处理这个问题。在构造函数中添加服务不会实例化该服务的新实例，而是为您提供一个指向该服务的单个现有实例的指针

• 我很抱歉我在angular工作已经有一段时间了。但我记得有过关于angular如何管理服务的对话。它应该只为在整个项目中共享的每个服务创建一个实例。为什么你认为你在创建formService的多个实例

Answer 2

当在组件级别提供@Injectable时，每次创建组件时都会实例化它。

实现所需功能的最简单方法是在NgModule中提供FormService，而不是在Component上。但是，如果每一组都需要一个FormService，那么您需要创建一个容器组件来为FormService提供高于该组件的dom级别。

要为整个应用程序创建一个FormService，请使您的app.module.ts文件如下所示(请注意，此处使用省略号表示其他代码(：

@NgModule({
imports: [BrowserModule, ...],
declarations: [AppComponent, ...],
providers: [FormService, ...],
bootstrap: [AppComponent]
})
export class AppModule {}

当然，您也可以在功能模块级别提供FormService。。。但我们在这里保持简单。

文档描述了依赖项注入器如何在此处更清楚地"找到"服务：https://angular.io/guide/architecture-services