Как мы можем избежать вызова службы каждый раз, когда создается экземпляр рекурсивного компонента, в котором он предоставляется? - PullRequest
Новая
       7

Как мы можем избежать вызова службы каждый раз, когда создается экземпляр рекурсивного компонента, в котором он предоставляется?

0 голосов
/ 07 ноября 2019

Вот типичный компонент с 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>

Ответы [ 2 ]

2 голосов
/ 07 ноября 2019

Итак, поправьте меня, если я ошибаюсь, но Angular должен справиться с этим для вас. Добавление сервиса в конструктор не создает новый экземпляр этого сервиса, но дает вам указатель на один существующий экземпляр этого сервиса

  • Я извиняюсь, это было немного, так как я работал в angular,Но я помню разговоры о том, как angular управляет услугами. Он должен создавать только один экземпляр каждого сервиса, который используется во всем проекте. Как вы думаете, почему вы создаете несколько экземпляров своего сервиса formService?
1 голос
/ 07 ноября 2019

Когда @Injectable предоставляется на уровне компонента, он создается каждый раз при создании компонента.

Самый простой способ добиться того, чего вы хотите, это предоставить FormService в * 1005. * вместо Component. Однако, если вам нужно FormService для каждой группы, вам нужно создать контейнерный компонент, чтобы обеспечить уровень FormService dom над этим компонентом.

Чтобы создать один FormService дляДля всего приложения сделайте так, чтобы ваш app.module.ts файл выглядел следующим образом (обратите внимание, что здесь используется многоточие для указания другого кода): 

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

Конечно, вы также можете предоставлять FormService на уровне Feature Module ... но мы оставим это здесь простым.

Документация описывает, как инжектор зависимостей «находит» сервис более четко здесь: https://angular.io/guide/architecture-services

...