Блог

 ngOnChanges(changes: SimpleChanges) {
  if(changes.formName){
  this.getFormConfigurations(this.formName); 
}

getFormConfigurations(formName): void {
console.log('Inside form call..');
 this.api.getForm(formName).subscribe((result)=>{
 }
}

In API

getForm(name): Observable<any> {
console.log("Inside..API")
return this.http<>....
}
 

Я использую этот подход для вызова api при изменении углового , как вывод в консоли

 Inside form call..
Inside..API
Inside form call..
Inside..API
Inside..API
Inside..API
 

Поскольку я вижу несколько запросов API по этому вопросу, как избежать ненужных вызовов API этого типа.

ngOnChanges будет вызываться каждый раз, когда вы formName будете изменены из родительского компонента, что приведет к нескольким подпискам. Если вы хотите вызвать свою функцию только один раз, вы можете использовать атрибут firstChange класса SimpleChange .

 ngOnChanges(changes: SimpleChanges) {
   if(changes.formName amp;amp; changes.formName.isFirstChange()){
    this.getFormConfigurations(this.formName); 
}
 

Крюк ngOnChanges жизненного цикла вызывается каждый раз, когда обнаруживается изменение значения свойства, связанного с данными. Кроме того, ngOnChanges это не то место, где вы должны подписываться, чтобы слушать изменения в вашем наблюдаемом.

Чтобы ограничить вызов API, вы можете сделать следующее,

• Если указанная форма является template-driven form

 import { ViewChild } from '@angular/common'

@ViewChild('opportunityForm', { static: true }) ngForm: NgForm;

ngOnInit() {
  this.changesInForm = this.ngForm.form.valueChanges.subscribe(x => {
    // Invoke call to injectable
  })
}

ngOnDestroy() {
   this.changesInForm.unsubscribe();
}
 

 <form #form="ngForm">
   
</form>
 

• Если указанная форма является reactive form

 form: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.form = this.formBuilder.group({
  
  });

  this.onChanges();
}

onChanges(): void {
  this.form.valueChanges.subscribe(value => {
    // Invoke call to injectable
  });
}