Блог

У меня есть родительский и дочерний компоненты.

В дочернем компоненте у меня есть кнопка, как показано ниже.

 //child.component.html

<button mat-raised-button  [disabled]="!form.valid || submitButtonDisable" type = 'Submit' color='primary'  >
{{generateButton}}
</button>


//child.component.ts
@Output() onGenerateReport: EventEmitter<any> = new EventEmitter<any>();
@Input() generateButton: String;

OnSubmit() {
  this.onGenerateReport.emit(this.parameterRequest);  // paasing data to parent after button click
  this.submitButtonDisable = true;
  this.generateButton = 'Generating...'
  }
  

Ниже приведен родительский компонент

   // parent component.html

  <child-component
      (onGenerateReport)="handleGenerateReport($event)"
      [generateButton] = "generateButton | async">
  </child-component>

    //parent.component.ts
 generateButton: Observable<String >;

   handleGenerateReport($event: ParameterRequest) {  //  event trigerred

        this.store.dispatch(new fromStore.SendRequest($event));

    this.store.select(fromStore.isDataLoaded).pipe(take(1)).subscribe(data => {
    if(data) {
    this.generateButton = of('Generate');   // this data not passing to child
   }
 })
}
  

Я передаю данные дочернему компоненту после успешного вызова, чтобы изменить метку кнопки.

Но ngrx выбирает, данные не передаются дочернему компоненту. Я что-то упускаю?

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

 import { OnChanges, SimpleChanges } from '@angular/core';
class childComponent implements OnChanges, OnInit, AfterViewInit {    
//child.component.ts
@Output() onGenerateReport: EventEmitter<any> = new EventEmitter<any>();
@Input() generateButton: String;

ngOnChanges(changes: SimpleChanges): void { 
  if(changes != null) {
    console.log(changes);   // here in changes object you will get the updated value of your input variables ex:  generateButton  
  }        
}

OnSubmit() {
   this.onGenerateReport.emit(this.parameterRequest);  // paasing data to parent after button click
   this.submitButtonDisable = true;
   this.generateButton = 'Generating...';}}
  

Просто выполните следующие шаги

• Просто импортируйте import { Input, OnChanges, SimpleChanges } from '@angular/core'; пакет.
• Затем реализуйте интерфейс export class ComponentName implements OnChanges
• Затем просто создайте функцию ngOnChanges(changes: SimpleChanges){
// changes.your input property name (contains the old and the new value)
// here you can getting all @Input property changes.
}