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

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...但我们在此保持简单。

文档在此处更清楚地描述了依赖注入器 "finds" 服务的方式：https://angular.io/guide/architecture-services

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

How can we avoid calling a service each time a recursive component, in which it is provided, is instantiated?

angular

angular5

angular8